基於HarmonyOS NEXT 5.0自定義增強版導航欄元件|鴻蒙ArkUI自定義標題欄

xiaoyan2017發表於2024-10-31
元件鴻蒙UI

這段時間比較熱門的莫過於華為推出的自主研發的面向全場景分散式作業系統HarmonyOS。

https://developer.huawei.com/

最新一直潛心學習鴻蒙os開發，於是基於HarmonyOS NEXT 5.0 API12 Release開發了一款自定義多功能導航條元件。

HMNavBar元件支援自定義返回鍵、標題/副標題、標題居中、背景色/背景圖片/背景漸變色、標題顏色、搜尋、右側操作區等功能。

如下圖：元件結構非常簡單。

元件引數配置

@Component
export struct HMNavBar {
  // 是否隱藏左側的返回鍵
  @Prop hideBackButton: boolean
  // 標題(支援字串|自定義元件)
  @BuilderParam title: ResourceStr | CustomBuilder = BuilderFunction
  // 副標題
  @BuilderParam subtitle: ResourceStr | CustomBuilder = BuilderFunction
  // 返回鍵圖示
  @Prop backButtonIcon: Resource | undefined = $r('sys.symbol.chevron_left')
  // 返回鍵標題
  @Prop backButtonTitle: ResourceStr
  // 背景色
  @Prop bgColor: ResourceColor = $r('sys.color.background_primary')
  // 漸變背景色
  @Prop bgLinearGradient: LinearGradient
  // 圖片背景
  @Prop bgImage: ResourceStr | PixelMap
  // 標題顏色
  @Prop fontColor: ResourceColor
  // 標題是否居中
  @Prop centerTitle: boolean
  // 右側按鈕區域
  @BuilderParam actions: Array<ActionMenuItem> | CustomBuilder = BuilderFunction
  // 導航條高度
  @Prop navbarHeight: number = 56

  // ...
}

呼叫方式非常簡單易上手。

  • 基礎用法
HMNavBar({
  backButtonIcon: $r('sys.symbol.arrow_left'),
  title: '鴻蒙自定義導航欄',
  subtitle: 'HarmonyOS Next 5.0自定義導航欄',
})
  • 自定義返回圖示/文字、標題、背景色、右鍵操作按鈕

@Builder customImgTitle() {
  Image('https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/logo-developer-header.svg').height(24).objectFit(ImageFit.Contain)
}

HMNavBar({
  backButtonIcon: $r('sys.symbol.chevron_left'),
  backButtonTitle: '返回',
  title: this.customImgTitle,
  subtitle: '鴻蒙5.0 api 12',
  centerTitle: true,
  bgColor: '#f3f6f9',
  fontColor: '#0a59f7',
  actions: [
    {
      icon: $r('app.media.app_icon'),
      action: () => promptAction.showToast({ message: "show toast index 1" })
    },
    {
      // icon: $r('sys.symbol.plus'),
      label: '更多>',
      color: '#bd43ff',
      action: () => promptAction.showToast({ message: "show toast index 2" })
    }
  ]
})
// 自定義漸變背景、背景圖片、右側操作區
HMNavBar({
  hideBackButton: true,
  title: 'HarmonyOS',
  subtitle: 'harmonyos next 5.0 api 12',
  bgLinearGradient: {
    angle: 135,
    colors: [['#42d392 ',0.2], ['#647eff',1]]
  },
  // bgImage: 'pages/assets/nav_bg.png',
  // bgImage: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/1025-pc-banner.jpeg',
  fontColor: '#fff',
  actions: [
    {
      icon: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/yuanfuwuicon.png',
      action: () => promptAction.showToast({ message: "show toast index 1" })
    },
    {
      icon: 'https://developer.huawei.com/allianceCmsResource/resource/HUAWEI_Developer_VUE/images/0620logo4.png',
      action: () => promptAction.showToast({ message: "show toast index 2" })
    },
    {
      icon: $r('sys.symbol.person_crop_circle_fill_1'),
      action: () => promptAction.showToast({ message: "show toast index 3" })
    }
  ],
  navbarHeight: 70
})

如上圖：還支援自定義導航搜尋功能。

HMNavBar({
  title: this.customSearchTitle1,
  actions: this.customSearchAction
})

HMNavBar({
  hideBackButton: true,
  title: this.customSearchTitle2,
  bgColor: '#0051ff',
})

HMNavBar({
  backButtonIcon: $r('sys.symbol.arrow_left'),
  backButtonTitle: '鴻蒙',
  title: this.customSearchTitle3,
  bgColor: '#c543fd',
  fontColor: '#fff',
  actions: [
    {
      icon: $r('sys.symbol.mic_fill'),
      action: () => promptAction.showToast({ ... })
    }
  ]
})

HMNavBar導航元件佈局結構如下。

build() {
    Flex() {
      // 左側模組
      Stack({ alignContent: Alignment.Start }) {
        Flex(){
          if(!this.hideBackButton) {
            this.backBuilder()
          }
          if(!this.centerTitle) {
            this.contentBuilder()
          }
        }
        .height('100%')
      }
      .height('100%')
      .layoutWeight(1)

      // 中間模組
      if(this.centerTitle) {
        Stack() {
          this.contentBuilder()
        }
        .height('100%')
        .layoutWeight(1)
      }

      // 右鍵操作模組
      Stack({ alignContent: Alignment.End }) {
        this.actionBuilder()
      }
      .padding({ right: 16 })
      .height('100%')
      .layoutWeight(this.centerTitle ? 1 : 0)
    }
    .backgroundColor(this.bgColor)
    .linearGradient(this.bgLinearGradient)
    .backgroundImage(this.bgImage, ImageRepeat.NoRepeat).backgroundImageSize(ImageSize.FILL)
    .height(this.navbarHeight)
    .width('100%')
}

支援懸浮在背景圖上面。

最後，附上幾個最新研發的跨平臺例項專案。

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天應用

tauri2.0-admin桌面端後臺系統|tauri2+vite5+element-plus管理後臺EXE程式

Electron32-ViteOS桌面版os系統|vue3+electron+arco客戶端OS管理模板

Vite5+Electron聊天室|electron31跨平臺仿微信EXE客戶端|vue3聊天程式

Ok，今天的分享就到這裡，希望以上的分享對大家有所幫助！

相關文章