鸿蒙开发:自定义一个简单的标题栏

简介: 本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。

前言

标题栏几乎是每个应用的标配,或多或少都会存在,在Android中一个简单的组合View就可以搞定,鸿蒙开发中,也是十分的简单,选择相对应的布局,然后设置组件即可。

你可以使用相对布局RelativeContainer或者线性布局Row,都可以进行实现,根据项目中的需求或者UI设计进行组件摆放,如上图所示,中间是标题,左右两个组件,简单实现如下:

Row() {
  Text("返回").margin({ left: 10 })
  Text("左右文字按钮")
  Text("编辑").margin({ right: 10 })
}.width("100%")
  .height(50)
  .justifyContent(FlexAlign.SpaceBetween)


以上的代码仅是左中右三个组件的时候使用,可以发现,一个标题组合组件一点难度没有,也没有任何技术含量,在实际的开发中,如果有多种标题栏的形式,考虑到代码复用的情况,尽量抽取一个自定义组件,通过属性的控制,选择当前页面需要的组件即可。



比如,有的页面左边是图片,右边是图片,或者左边两个按钮,两个图片,或者图片文字相结合等等情况,在实际封装中,都是需要考虑的。

针对以上的各种情况,目前也做了一层简单的封装,已经上传至了中心仓库,有需要的朋友可以直接拿来使用。


中心仓库地址:


https://ohpm.openharmony.cn/#/cn/detail/@abner%2Fbar


快速使用


方式一:在需要Module中的oh-package.json5中设置三方包依赖,配置示例如下:

"dependencies": { "@abner/bar": "^1.0.1"}

方式二:在Terminal窗口中,执行如下命令安装三方包,DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

建议:在使用的模块路径下进行执行命令。

ohpm install @abner/bar


初始化


初始化的作用,用于统一标题栏,比如宽高、字体颜色大小,统一点击事件等等,建议在AbilityStage中进行,属性 选择性调用,如果不需要,可以不设置。


initActionBar({})


相关属性


相关属性可以用于全局初始化或者单独使用都可以。


属性

类型

概述

barWidth

Length

标题栏宽度

barHeight

Length

标题栏高度

barBackgroundColor

ResourceColor

标题栏背景颜色

onTitleClick

回调

标题点击事件

leftText

string/Resource

左边按钮文字

left2Text

string/Resource

左边第二个按钮文字

leftMenuMargin

Length

左边按钮,默认距离左边

leftMenuBgColor

ResourceColor

左边背景颜色

rightMenuBgColor

ResourceColor

右边背景颜色

rightMenuMargin

Length

右边按钮距离右边

leftMenuWidth

Length

左边按钮整体宽度

leftMenuHeight

Length

左边按钮整体高度

rightMenuWidth

Length

右边按钮宽度

rightMenuHeight

Length

右边按钮高度

onLeftClick

回调

左边整体的点击

onLeftTextClick

回调

左边文字按钮的点击

onLeftImageClick

回调

左边图片按钮的点击

onRightClick

回调

右边整体的点击

onRightTextClick

回调

右边文字按钮的点击

onRightImageClick

回调

右边图片按钮的点击

leftIcon

PixelMap/ ResourceStr/ DrawableDescriptor

左边按钮第一个图标

left2Icon

PixelMap/ ResourceStr/ DrawableDescriptor

左边按钮第二个图标

rightIcon

PixelMap/ ResourceStr/ DrawableDescriptor

右边按钮第一个图标

right2Icon

PixelMap/ ResourceStr/ DrawableDescriptor

右边按钮第二个图标

hideLeftMenu

boolean

隐藏左边按钮,默认不隐藏

hideTitle

boolean

隐藏标题,默认不隐藏

hideRightMenu

boolean

隐藏右边按钮,默认不隐藏

isAvoidanceNavigation

boolean

是否避让导航,默认不避让

titleAttribute

TitleAttribute

标题通用属性,颜色大小等

leftMenuAttribute

BarMenuAttribute

左边第一个按钮通用属性,颜色大小等

leftMenu2Attribute

BarMenuAttribute

左边第二个按钮通用属性,颜色大小等

rightMenuAttribute

BarMenuAttribute

右边第一个按钮通用属性,颜色大小等

rightMenu2Attribute

BarMenuAttribute

右边第二个按钮通用属性,颜色大小等


基本使用


1、简单使用,就是一个普通的组件


ActionBar({
  title: "普通单标题"
})


2、左侧文字按钮展示


ActionBar({
  title: "左侧文字按钮",
  leftText: "返回",
  onLeftClick: () => {
    console.log("====点击了左侧按钮")
  },
})


3、左侧图片按钮


ActionBar({
  title: "左侧图片按钮",
  leftIcon: $r("app.media.app_icon"),
  onLeftClick: () => {
    console.log("====点击了左侧按钮")
  },
})


4、右侧文字按钮


ActionBar({
  title: "右侧文字按钮", rightText: "编辑",
  onRightClick: () => {
    console.log("====点击了右侧按钮")
  }
})


5、右侧图片按钮


ActionBar({
  title: "右侧图片按钮",
  rightIcon: $r("app.media.app_icon"),
  onRightClick: () => {
    console.log("====点击了右侧按钮")
  }
})


6、左右文字按钮


ActionBar({
  title: "左右文字按钮",
  leftText: "返回",
  rightText: "编辑",
  onLeftClick: () => {
    console.log("====点击了左侧按钮")
  },
  onRightClick: () => {
    console.log("====点击了右侧按钮")
  }
})


7、左右图片按钮


ActionBar({
  title: "左右图片按钮",
  rightIcon: $r("app.media.app_icon"),
  leftIcon: $r("app.media.app_icon"),
  onLeftClick: () => {
    console.log("====点击了左侧按钮")
  },
  onRightClick: () => {
    console.log("====点击了右侧按钮")
  }
})


8、左侧文字双按钮


ActionBar({
  title: "左侧文字双按钮",
  leftText: "按钮1",
  left2Text: "按钮2",
  leftMenuAttribute: {
    textMargin: { right: 10 }
  },
  onLeftTextClick: (position) => {
    console.log("====点击了左侧按钮:" + position)
  }
})


9、左侧图片双按钮


ActionBar({
  title: "左侧图片双按钮",
  leftIcon: $r("app.media.app_icon"),
  left2Icon: $r("app.media.app_icon"),
  leftMenuAttribute: {
    imageMargin: { right: 10 }
  },
  onLeftImageClick: (position) => {
    console.log("====点击了左侧按钮:" + position)
  }
})


10、右侧文字双按钮


ActionBar({
  title: "右侧文字双按钮",
  rightText: "按钮1",
  right2Text: "按钮2",
  rightMenuAttribute: {
    textMargin: { left: 10 }
  },
  onRightTextClick: (position) => {
    console.log("====点击了右侧按钮:" + position)
  }
})


11、右侧图片双按钮


ActionBar({
  title: "右侧图片双按钮",
  rightIcon: $r("app.media.app_icon"),
  right2Icon: $r("app.media.app_icon"),
  rightMenu2Attribute: {
    imageMargin: { left: 10 }
  },
  onRightImageClick: (position) => {
    console.log("====点击了右侧按钮:" + position)
  }
})


12、左右文字双按钮


ActionBar({
  title: "左右文字双按钮",
  leftText: "按钮1",
  left2Text: "按钮2",
  leftMenuAttribute: {
    textMargin: { right: 10 }
  },
  onLeftTextClick: (position) => {
    console.log("====点击了左侧按钮:" + position)
  },
  rightText: "按钮1",
  right2Text: "按钮2",
  rightMenuAttribute: {
    textMargin: { left: 10 }
  },
  onRightTextClick: (position) => {
    console.log("====点击了右侧按钮:" + position)
  }
})


13、左侧图文


ActionBar({
  title: "左侧图文",
  leftText: "返回",
  leftIcon: $r("app.media.app_icon"),
  leftMenuType: MenuType.IMAGE_TEXT,
  leftMenuAttribute: {
    imageMargin: {
      right: 10
    }
  },
  onLeftClick: () => {
    console.log("============点击了整个")
  }
})


14、左侧文图


ActionBar({
  title: "左侧文图",
  leftText: "返回",
  leftIcon: $r("app.media.app_icon"),
  leftMenuType: MenuType.TEXT_IMAGE,
  leftMenuAttribute: {
    textMargin: {
      right: 10
    }
  },
  onLeftClick: () => {
    console.log("============点击了整个")
  }
})


15、右侧图文


ActionBar({
  title: "右侧图文",
  rightText: "编辑",
  rightIcon: $r("app.media.app_icon"),
  rightMenuType: MenuType.IMAGE_TEXT,
  rightMenuAttribute: {
    imageMargin: {
      right: 10
    }
  },
  onRightClick: () => {
    console.log("============点击了整个")
  }
})


16、右侧文图


ActionBar({
  title: "右侧文图",
  rightText: "编辑",
  rightIcon: $r("app.media.app_icon"),
  rightMenuType: MenuType.TEXT_IMAGE,
  rightMenuAttribute: {
    textMargin: {
      right: 10
    }
  },
  onRightClick: () => {
    console.log("============点击了整个")
  }
})


17、自定义标题


ActionBar({
  titleLayout: this.titleLayout
})


18、左侧按钮自己定义


ActionBar({
  title: "左侧按钮自己定义",
  leftMenuLayout: this.leftMenuLayout
})


19、右侧按钮自己定义


ActionBar({
  title: "右侧按钮自己定义",
  rightMenuLayout: this.rightMenuLayout
})

使用总结


本身就是一个很简单的标题栏组件,没有什么过多的技术含量,有一点需要注意,当使用沉浸式的时候,注意标题栏的位置,需要避让状态栏。

目录
打赏
0
4
5
1
196
分享
相关文章
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
70 0
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
本节以“账本”为例,使用关系型数据库接口实现账单的增、删、改、查操作。通过创建ArkTSRdb应用,演示如何操作RdbStore进行数据管理,并结合界面按钮实现交互功能。
25 0
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
HarmonyOS NEXT仓颉开发语言实战案例:图片预览器
本文介绍了如何使用仓颉语言实现图片放大预览器。通过弹窗组件`CustomDialogController`与`Swiper`容器结合,实现全屏图片浏览效果,支持多图切换与点击关闭功能,适配动态广场场景下的图片预览需求。
HarmonyOS NEXT仓颉开发语言实战案例:动态广场
本文介绍了使用仓颉语言开发类似朋友圈的动态广场页面,包含导航栏和状态列表。通过Column、Row、List等组件实现页面结构,并使用Grid适配图片展示。结合数据绑定与组件化思想,完成动态内容展示。
|
18天前
HarmonyOS NEXT仓颉开发语言实战案例:简约音乐播放页
本文介绍了使用仓颉语言实现一个精美音乐播放器界面的过程。页面采用纵向布局,分为顶部导航栏、中间内容区和底部歌词工具栏。通过组件组合与样式调整,实现了封面展示、进度条控制及播放功能,展现了仓颉语言在UI开发中的优雅与高效。
HarmonyOS NEXT仓颉开发语言实现画板案例
本文介绍了使用仓颉开发语言实现画板功能的案例,通过Canvas组件实现画布绘制,并利用贝塞尔曲线使画笔跟随触摸轨迹生成平滑曲线。内容包含画布初始化、触控事件处理及清空功能,展示了仓颉语言在图形绘制中的应用技巧。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问