前言
标题栏几乎是每个应用的标配，或多或少都会存在，在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 /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 })
使用总结
本身就是一个很简单的标题栏组件，没有什么过多的技术含量，有一点需要注意，当使用沉浸式的时候，注意标题栏的位置，需要避让状态栏。
