基于HarmonyOS NEXT 5.0自定义增强版导航栏组件|鸿蒙ArkUI自定义标题栏

这段时间比较热门的莫过于华为推出的自主研发的面向全场景分布式操作系统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

  // ...
}