在这里插入图片描述

代码:

import { RouterModule, RouterNameConstants } from "routers"
import { CommonConstants, fpConversion, vpConversion } from "../../../../Index"
import { primaryColor } from "../resource/CommonConstants"

/**
 * 箭头导航栏
 */
@ComponentV2
export struct NavigationBarView {
  @Param @Require barTitle: string | Resource //标题
  @Param needArrow: boolean = true // 是否需要箭头
  @Param needRightText: string | Resource = ''  //右侧文本
  @Param rightTextCallBack: ()=> void = ()=> {} //右侧文本点击
  @BuilderParam contentView: () => void = this.defaultView //内容: 其他组件

  @Builder
  defaultView() {

  }

  build() {
    NavDestination() {
      Flex({ direction: FlexDirection.Column }) {
        RelativeContainer() {
          if (this.needRightText) {
            Text(this.needRightText)
              .fontColor(Color.White)
              .fontSize(fpConversion(16))
              .alignRules({
                right: { anchor: '__container__', align: HorizontalAlign.End },
                center: { anchor: '__container__', align: VerticalAlign.Center }
              })
              .onClick(()=> {
                this.rightTextCallBack();
              })
          }

          if (this.needArrow) {
            Image($r('app.media.icon_left_arrow'))
              .width(vpConversion(24))
              .height(vpConversion(24))
              .alignRules({
                left: { anchor: '__container__', align: HorizontalAlign.Start },
                center: { anchor: '__container__', align: VerticalAlign.Center }
              })
              .id('leftArrow')
              .onClick(() => {
                RouterModule.pop(RouterNameConstants.RenAndMao) //回退上一页
              })
          }

          Text(this.barTitle)
            .fontSize(fpConversion(18))
            .fontWeight(FontWeight.Medium)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .alignRules({
              center: { anchor: '__container__', align: VerticalAlign.Center },
              middle: { anchor: '__container__', align: HorizontalAlign.Center }
            })
            .id('centerTitle')


        }
        .height(vpConversion(56))
        .backgroundColor(primaryColor())
        .width(CommonConstants.FULL_SCREEN)
        .padding({ left: vpConversion(20), right: vpConversion(20) })


        //页面内容
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          this.contentView()
        }
        .layoutWeight(1)
        .width(CommonConstants.FULL_SCREEN)
        .backgroundColor(Color.White)

      }
      .height(CommonConstants.FULL_SCREEN)
      .width(CommonConstants.FULL_SCREEN)
    }

    .hideTitleBar(true)
  }
}

使用

@ComponentV2
export struct MyView {
  build() {
    NavigationBarView({barTitle: '12345'}) {
      Text('0987654321')
    }
  }
}
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐