前言

標(biāo)題欄幾乎是每個(gè)應(yīng)用的標(biāo)配，或多或少都會(huì)存在落追，在Android中一個(gè)簡單的組合View就可以搞定，鴻蒙開發(fā)中涯肩，也是十分的簡單轿钠，選擇相對應(yīng)的布局巢钓，然后設(shè)置組件即可。

你可以使用相對布局RelativeContainer或者線性布局Row疗垛， 都可以進(jìn)行實(shí)現(xiàn)症汹，根據(jù)項(xiàng)目中的需求或者UI設(shè)計(jì)進(jìn)行組件擺放，如上圖所示继谚，中間是標(biāo)題烈菌，左右兩個(gè)組件，簡單實(shí)現(xiàn)如下：

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

以上的代碼僅是左中右三個(gè)組件的時(shí)候使用花履，可以發(fā)現(xiàn)芽世，一個(gè)標(biāo)題組合組件一點(diǎn)難度沒有，也沒有任何技術(shù)含量诡壁，在實(shí)際的開發(fā)中济瓢，如果有多種標(biāo)題欄的形式，考慮到代碼復(fù)用的情況妹卿，盡量抽取一個(gè)自定義組件旺矾，通過屬性的控制，選擇當(dāng)前頁面需要的組件即可夺克。

比如箕宙，有的頁面左邊是圖片，右邊是圖片铺纽，或者左邊兩個(gè)按鈕柬帕，兩個(gè)圖片，或者圖片文字相結(jié)合等等情況狡门，在實(shí)際封裝中陷寝，都是需要考慮的。

針對以上的各種情況其馏，目前也做了一層簡單的封裝凤跑，已經(jīng)上傳至了中心倉庫，有需要的朋友可以直接拿來使用叛复。

中心倉庫地址：

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

快速使用

方式一：在需要Module中的oh-package.json5中設(shè)置三方包依賴仔引，配置示例如下：

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

方式二：在Terminal窗口中，執(zhí)行如下命令安裝三方包褐奥，DevEco Studio會(huì)自動(dòng)在工程的oh-package.json5中自動(dòng)添加三方包依賴咖耘。

建議：在使用的模塊路徑下進(jìn)行執(zhí)行命令。

ohpm install @abner/bar

初始化

初始化的作用抖僵，用于統(tǒng)一標(biāo)題欄，比如寬高缘揪、字體顏色大小耍群，統(tǒng)一點(diǎn)擊事件等等,建議在AbilityStage中進(jìn)行义桂，屬性 選擇性調(diào)用，如果不需要蹈垢，可以不設(shè)置慷吊。

initActionBar({})

相關(guān)屬性

相關(guān)屬性可以用于全局初始化或者單獨(dú)使用都可以。

基本使用

1哼绑、簡單使用，就是一個(gè)普通的組件

ActionBar({
  title: "普通單標(biāo)題"
})

2碉咆、左側(cè)文字按鈕展示

ActionBar({
  title: "左側(cè)文字按鈕",
  leftText: "返回",
  onLeftClick: () => {
    console.log("====點(diǎn)擊了左側(cè)按鈕")
  },
})

3抖韩、左側(cè)圖片按鈕

ActionBar({
  title: "左側(cè)圖片按鈕",
  leftIcon: $r("app.media.app_icon"),
  onLeftClick: () => {
    console.log("====點(diǎn)擊了左側(cè)按鈕")
  },
})

4、右側(cè)文字按鈕

ActionBar({
  title: "右側(cè)文字按鈕", rightText: "編輯",
  onRightClick: () => {
    console.log("====點(diǎn)擊了右側(cè)按鈕")
  }
})

5疫铜、右側(cè)圖片按鈕

ActionBar({
  title: "右側(cè)圖片按鈕",
  rightIcon: $r("app.media.app_icon"),
  onRightClick: () => {
    console.log("====點(diǎn)擊了右側(cè)按鈕")
  }
})

6茂浮、左右文字按鈕

ActionBar({
  title: "左右文字按鈕",
  leftText: "返回",
  rightText: "編輯",
  onLeftClick: () => {
    console.log("====點(diǎn)擊了左側(cè)按鈕")
  },
  onRightClick: () => {
    console.log("====點(diǎn)擊了右側(cè)按鈕")
  }
})

7、左右圖片按鈕

ActionBar({
  title: "左右圖片按鈕",
  rightIcon: $r("app.media.app_icon"),
  leftIcon: $r("app.media.app_icon"),
  onLeftClick: () => {
    console.log("====點(diǎn)擊了左側(cè)按鈕")
  },
  onRightClick: () => {
    console.log("====點(diǎn)擊了右側(cè)按鈕")
  }
})

8块攒、左側(cè)文字雙按鈕

ActionBar({
  title: "左側(cè)文字雙按鈕",
  leftText: "按鈕1",
  left2Text: "按鈕2",
  leftMenuAttribute: {
    textMargin: { right: 10 }
  },
  onLeftTextClick: (position) => {
    console.log("====點(diǎn)擊了左側(cè)按鈕:" + position)
  }
})

9励稳、左側(cè)圖片雙按鈕

ActionBar({
  title: "左側(cè)圖片雙按鈕",
  leftIcon: $r("app.media.app_icon"),
  left2Icon: $r("app.media.app_icon"),
  leftMenuAttribute: {
    imageMargin: { right: 10 }
  },
  onLeftImageClick: (position) => {
    console.log("====點(diǎn)擊了左側(cè)按鈕:" + position)
  }
})

10、右側(cè)文字雙按鈕

ActionBar({
  title: "右側(cè)文字雙按鈕",
  rightText: "按鈕1",
  right2Text: "按鈕2",
  rightMenuAttribute: {
    textMargin: { left: 10 }
  },
  onRightTextClick: (position) => {
    console.log("====點(diǎn)擊了右側(cè)按鈕:" + position)
  }
})

11囱井、右側(cè)圖片雙按鈕

ActionBar({
  title: "右側(cè)圖片雙按鈕",
  rightIcon: $r("app.media.app_icon"),
  right2Icon: $r("app.media.app_icon"),
  rightMenu2Attribute: {
    imageMargin: { left: 10 }
  },
  onRightImageClick: (position) => {
    console.log("====點(diǎn)擊了右側(cè)按鈕:" + position)
  }
})

12驹尼、左右文字雙按鈕

ActionBar({
  title: "左右文字雙按鈕",
  leftText: "按鈕1",
  left2Text: "按鈕2",
  leftMenuAttribute: {
    textMargin: { right: 10 }
  },
  onLeftTextClick: (position) => {
    console.log("====點(diǎn)擊了左側(cè)按鈕:" + position)
  },
  rightText: "按鈕1",
  right2Text: "按鈕2",
  rightMenuAttribute: {
    textMargin: { left: 10 }
  },
  onRightTextClick: (position) => {
    console.log("====點(diǎn)擊了右側(cè)按鈕:" + position)
  }
})

13、左側(cè)圖文

ActionBar({
  title: "左側(cè)圖文",
  leftText: "返回",
  leftIcon: $r("app.media.app_icon"),
  leftMenuType: MenuType.IMAGE_TEXT,
  leftMenuAttribute: {
    imageMargin: {
      right: 10
    }
  },
  onLeftClick: () => {
    console.log("============點(diǎn)擊了整個(gè)")
  }
})

14庞呕、左側(cè)文圖

ActionBar({
  title: "左側(cè)文圖",
  leftText: "返回",
  leftIcon: $r("app.media.app_icon"),
  leftMenuType: MenuType.TEXT_IMAGE,
  leftMenuAttribute: {
    textMargin: {
      right: 10
    }
  },
  onLeftClick: () => {
    console.log("============點(diǎn)擊了整個(gè)")
  }
})

15新翎、右側(cè)圖文

ActionBar({
  title: "右側(cè)圖文",
  rightText: "編輯",
  rightIcon: $r("app.media.app_icon"),
  rightMenuType: MenuType.IMAGE_TEXT,
  rightMenuAttribute: {
    imageMargin: {
      right: 10
    }
  },
  onRightClick: () => {
    console.log("============點(diǎn)擊了整個(gè)")
  }
})

16、右側(cè)文圖

ActionBar({
  title: "右側(cè)文圖",
  rightText: "編輯",
  rightIcon: $r("app.media.app_icon"),
  rightMenuType: MenuType.TEXT_IMAGE,
  rightMenuAttribute: {
    textMargin: {
      right: 10
    }
  },
  onRightClick: () => {
    console.log("============點(diǎn)擊了整個(gè)")
  }
})

17住练、自定義標(biāo)題

ActionBar({
  titleLayout: this.titleLayout
})

18地啰、左側(cè)按鈕自己定義

ActionBar({
  title: "左側(cè)按鈕自己定義",
  leftMenuLayout: this.leftMenuLayout
})

19、右側(cè)按鈕自己定義

ActionBar({
  title: "右側(cè)按鈕自己定義",
  rightMenuLayout: this.rightMenuLayout
})

使用總結(jié)

本省就是一個(gè)很簡單的標(biāo)題欄組件讲逛，沒有什么過多的技術(shù)含量亏吝，有一點(diǎn)需要注意，當(dāng)使用沉浸式的時(shí)候盏混，注意標(biāo)題欄的位置蔚鸥，需要避讓狀態(tài)欄惜论。