前言

標題欄幾乎是每個應用的標配，或多或少都會存在坤学，在Android中一個簡單的組合View就可以搞定疯坤，鴻蒙開發(fā)中，也是十分的簡單深浮，選擇相對應的布局压怠，然后設置組件即可。

你可以使用相對布局RelativeContainer或者線性布局Row飞苇， 都可以進行實現(xiàn)菌瘫，根據項目中的需求或者UI設計進行組件擺放，如上圖所示布卡，中間是標題雨让，左右兩個組件，簡單實現(xiàn)如下：

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

以上的代碼僅是左中右三個組件的時候使用忿等，可以發(fā)現(xiàn)栖忠，一個標題組合組件一點難度沒有，也沒有任何技術含量这弧，在實際的開發(fā)中娃闲，如果有多種標題欄的形式，考慮到代碼復用的情況匾浪，盡量抽取一個自定義組件皇帮，通過屬性的控制，選擇當前頁面需要的組件即可蛋辈。

比如属拾，有的頁面左邊是圖片，右邊是圖片冷溶，或者左邊兩個按鈕渐白，兩個圖片，或者圖片文字相結合等等情況逞频，在實際封裝中纯衍，都是需要考慮的。

針對以上的各種情況苗胀，目前也做了一層簡單的封裝襟诸，已經上傳至了中心倉庫瓦堵，有需要的朋友可以直接拿來使用。

中心倉庫地址：

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

快速使用

方式一：在需要Module中的oh-package.json5中設置三方包依賴歌亲，配置示例如下：

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

方式二：在Terminal窗口中菇用，執(zhí)行如下命令安裝三方包，DevEco Studio會自動在工程的oh-package.json5中自動添加三方包依賴陷揪。

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

ohpm install @abner/bar

初始化

初始化的作用，用于統(tǒng)一標題欄悍缠，比如寬高卦绣、字體顏色大小，統(tǒng)一點擊事件等等,建議在AbilityStage中進行扮休，屬性 選擇性調用迎卤，如果不需要，可以不設置玷坠。

initActionBar({})

相關屬性

相關屬性可以用于全局初始化或者單獨使用都可以蜗搔。

基本使用

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

使用總結

本省就是一個很簡單的標題欄組件蔬捷，沒有什么過多的技術含量诈乒，有一點需要注意古拴，當使用沉浸式的時候酥郭，注意標題欄的位置慕购，需要避讓狀態(tài)欄猴娩。