HarmonyOS基本UI封装——标题栏组件NavBar封装与使用(二)

ohpm install @peakmain/library

import NavBar from "@peakmain/library/src/main/ets/components/title/NavBar"

  @State
  title: string = "默认样式"
  @State
  leftImage: PixelMap | ResourceStr | DrawableDescriptor | null = $r("app.media.ic_public_left_arrow")
  @State
  titleBold: boolean = true
  @State
  rightText: string = ""
  @State
  rightImage: PixelMap | ResourceStr | DrawableDescriptor | null = null
  build() {
    Column() {
      NavBar({
        title: this.title,//标题
        leftImage: this.leftImage,//左边返回图片
        titleBold: this.titleBold,//标题是否加粗
        right: this.rightText,//右边文本，默认为空
        rightClick: this.rightClick,//右边按钮的点击事件
        rightImage: this.rightImage//右边图片
      })
    }
  }

this.leftImage = this.leftImage ? null : $r("app.media.ic_public_left_arrow")

this.leftImage = $r("app.media.ic_new_left_arrow")

this.title = "NavBar 标题组件"

this.titleBold = !this.titleBold

this.rightText = "清空"

this.rightImage = $r("app.media.ic_right_menu")

import { router } from '@kit.ArkUI'

@Preview
@Component
struct NavBar {
  @Prop
  title: string = "标题" //标题内容
  @Prop
  titleBold: boolean = true //标题是否加粗
  @Prop
  backgroundColorResource: ResourceColor = Color.White
  @Prop
  leftImage: PixelMap | ResourceStr | DrawableDescriptor | null = $r("app.media.ic_public_left_arrow") //左边箭头
  @Prop
  right: string = "" //右边内容
  @Prop
  rightImage: PixelMap | ResourceStr | DrawableDescriptor | null = null
  rightClick: () => void = () => {
  }

  build() {
    Stack() {
      // 返回键
      Row() {
        Image(this.leftImage)
          .width(25)
          .height(25)
      }
      .width(30)
      .height(30)
      .borderRadius(15)
      .visibility(this.leftImage ? Visibility.Visible : Visibility.Hidden)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        router.back()
      })
      .zIndex(2)

      Text(this.title)
        .layoutWeight(1)
        .fontWeight(this.titleBold ? FontWeight.Bold : FontWeight.Normal)
        .fontColor($r("app.color.color_272a2b"))
        .fontSize(16)
        .textAlign(TextAlign.Center)
        .visibility(this.title ? Visibility.Visible : Visibility.Hidden)
        .width("100%")


      if (!this.rightImage) {
        Text(this.right ? this.right : "清空")
          .fontColor($r("app.color.color_272a2b"))
          .fontWeight(FontWeight.Bold)
          .visibility(this.right ? Visibility.Visible : Visibility.Hidden)
          .fontSize(14)
          .width("100%")
          .textAlign(TextAlign.End)
          .onClick(() => {
            this.rightClick && this.rightClick()
          })
          .zIndex(1)
      }
      if (this.rightImage) {
        Row() {
          Image(this.rightImage)
            .height(25)
            .onClick(() => {
              this.rightClick && this.rightClick()
            }).zIndex(1)
        }.width("100%")
        .onClick(() => {
          this.rightClick && this.rightClick()
        })
        .justifyContent(FlexAlign.End)
      }
    }
    .backgroundColor(this.backgroundColorResource)
    .width('100%')
    .alignContent(Alignment.Start)
    .height(56)
    .padding({
      right: 13,
      left: 12
    })
  }
}

export default NavBar

rightClick: () => void = () => {
}