前言

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


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

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


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

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


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

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

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


中心仓库地址:

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
})

使用总结

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