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

前言

• BasicLibrary是一个基于API 11封装的基本库
• 未来的计划是将其打造成一个通用的UI组件+基本工具组件，目前正在完善UI组件，大家如果组件有什么需求，可以尽管提哦
• BasicLibrary项目地址
• BasicLibrary的openHarmony三方库中心仓

文章系列

• HarmonyOS基本工具封装------BasicLibrary的基本使用(一)

简介

鸿蒙基本库封装，提升鸿蒙开发效率

安装

ohpm install @peakmain/library

一、NabBar的使用

导入依赖

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//右边图片
      })
    }
  }

1. 隐藏/显示左边返回箭头，默认显示

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

• null表示隐藏，非null表示显示并替换

2. 替换左边返回箭头

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

3. 修改标题

this.title = "NavBar 标题组件"

4. 标题是否加粗,默认是加粗

this.titleBold = !this.titleBold

5. 显示右边文本为清空，默认不显示

this.rightText = "清空"

6. 显示并设置右边图片按钮，默认不显示

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

布局整体拆分分为：左边图片，中间标题，右边文本/右边图片

• 我们可以使用Row来实现，但是右边图片可能没有，且图片宽度不能写死固定，这就导致Row实现的时候，可能会出现标题不完全居中

• 为了保证布局完全居中，我们可以设置标题的宽度为整个屏幕的100%，同时文字居中

• 我们如果按照Row顺序编写代码，我们会发现点击箭头的时候，没有任何效果

  • 原因是标题设置为100%，覆盖了箭头，点击箭头时实际点击的是标题
  • 为了解决这个问题，我们可以通过.zIndex属性来提高箭头按钮的优先级，这样就可以保证箭头按钮点击事件生效了

• 这里父子组件通信用的是@State和@Prop，原因是这里不涉及到子组件修改，父组件跟着修改的情况

父组件调用子组件的方法

• 子组件声明一个方法供给父组件调用，并子组件点击时需要判断是否为空

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

• 父组件调用子组件时声明点击方法即可

三、总结

整体实现来说，还是相当简单的，主要是对相关API的熟悉。谢谢大家查看