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

前言

本文基于Api12

标题栏几乎是每个应用的标配，或多或少都会存在，在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
})

使用总结

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