HarmonyOSBaseLibs/src/main/ets/view/SafeView.ets

import { WindowHelper } from '../utils/WindowHelper';
import { inputMethod } from '@kit.IMEKit';

export interface TitleBarBtn {
  text?: string | Resource;
  img?: PixelMap | ResourceStr | DrawableDescriptor;
  color?: string | Resource;
  onClick: () => void
}

@Preview
@Component
export struct SafeView {
  @Consume('pageInfos') pageInfos?: NavPathStack
  @Prop isLoading: boolean
  // 是不是沉浸式
  @Prop isImmersive: boolean
  // 设置导航栏标题
  @Prop titleText: ResourceStr
  // 设置导航栏背景色
  @Prop backgroundColorNav: ResourceColor
  // 设置导航栏背景色
  @Prop backgroundColorView: ResourceColor
  // 设置导航栏背景不透明度
  // 元素的不透明度，取值范围为0到1，1表示不透明，0表示完全透明, 达到隐藏组件效果，但是在布局中占位。
  @Prop opacitys: number | Resource
  // 是否显示返回按钮
  @Prop hideBack: boolean
  /**
   * 是否显示左侧角标,存在onClickLeft时生效
   */
  @Prop showBadgeLeft: boolean;
  /**
   * 是否显示右侧角标,存在onClickLeft时生效
   */
  @Prop showBadgeRight: boolean;
  // 设置返回按钮事件，如果hideBack为true，该事件无效
  onBackEvent?: () => void = undefined
  // 设置返回按钮事件
  onClickLeft?: TitleBarBtn
  onClickRight?: TitleBarBtn

  @Builder
  doNothingBuilder() {
  }

  @BuilderParam customBuilderParam: () => void = this.doNothingBuilder

  build() {
    NavDestination() {
      Stack() {
        Column() {
          this.customBuilderParam()
        }
        .padding({
          top: this.isImmersive ? 0 : WindowHelper.topRectHeight + 44
        })
        .align(Alignment.Top)
        .width('100%')
        .height('100%')

        Row()
          .height(WindowHelper.topRectHeight)
          .width('100%')
          .backgroundColor(this.backgroundColorNav ?? '#ffffff')
          .opacity(undefined === this.opacitys ? 1 : this.opacitys > 1 ? 1 : this.opacitys < 0 ? 0 : this.opacitys)

        Row() {

          Row() {
            Image($r("app.media.base_back"))
              .height(15)
              .objectFit(ImageFit.Contain)
              .onClick(() => {
                if (this.onBackEvent && !this.hideBack) {
                  this.onBackEvent()
                } else if (this.pageInfos) {
                  this.pageInfos.pop()
                }
              }).visibility(!this.hideBack ? Visibility.Visible : Visibility.None)
          }.width(110)

          Text(`${this.titleText}`)
            .maxLines(1)
            .fontColor('#11102C')
            .fontSize(16)
            .fontWeight(FontWeight.Medium)
            .ellipsisMode(EllipsisMode.CENTER)
            .textOverflow({
              overflow: TextOverflow.Ellipsis
            })
            .constraintSize({
              maxWidth: 120
            })

          Row() {
            if (!this.onClickLeft?.img && this.onClickLeft) {
              Badge({
                count:this.showBadgeLeft?1:0,
                style:{
                  badgeSize:6,
                  badgeColor: Color.Red
                }
              }){
                Text(`${this.onClickLeft?.text}` ?? '确定')
                  .fontColor(this.onClickLeft?.color ?? '#17171A')
                  .onClick(() => {
                    this.onClickLeft?.onClick && this.onClickLeft?.onClick()
                  })
              }
            }
            if (this.onClickLeft?.img && this.onClickLeft) {
              Badge({
                count:this.showBadgeLeft?1:0,
                style:{
                  badgeSize:6,
                  badgeColor: '#FF6500',
                  color: '#FF6500'
                }
              }){
                Image(this.onClickLeft.img)
                  .onClick(() => {
                    this.onClickLeft?.onClick && this.onClickLeft?.onClick()
                  })
                  .objectFit(ImageFit.Contain)
                  .width(20)
                  .height(20)
              }
            }
            if (!this.onClickRight?.img && this.onClickRight) {
              Badge({
                count:this.showBadgeRight?1:0,
                style:{
                  badgeSize:6,
                  badgeColor: '#FF6500',
                  color: '#FF6500'
                }
              }){
                Text(this.onClickRight?.text ?? '确定')
                  .fontColor(this.onClickRight?.color ?? '#17171A')
                  .onClick(() => {
                    this.onClickRight?.onClick && this.onClickRight?.onClick()
                  })
                  .margin({
                    left: 10
                  })
              }
            }
            if (this.onClickRight?.img && this.onClickRight) {
              Badge({
                count:this.showBadgeRight?1:0,
                style:{
                  badgeSize:6,
                  badgeColor: '#FF6500',
                  color: '#FF6500'
                }
              }){
                Image(this.onClickRight.img)
                  .onClick(() => {
                    this.onClickRight?.onClick && this.onClickRight?.onClick()
                  })
                  .objectFit(ImageFit.Contain)
                  .width(20)
                  .height(20)
                  .margin({
                    left: 10
                  })
              }
            }

          }.width(110)
          .justifyContent(FlexAlign.End)
        }
        .backgroundColor(this.backgroundColorNav ?? '#ffffff')
        .opacity(undefined === this.opacitys ? 1 : this.opacitys > 1 ? 1 : this.opacitys < 0 ? 0 : this.opacitys)
        .justifyContent(FlexAlign.SpaceBetween)
        .height(44)
        .padding({
          left: 15,
          right: 15
        })
        .width('100%')
        .margin({
          top: WindowHelper.topRectHeight
        })

        Column() {
          LoadingProgress()
            .color(Color.White)
            .width(80).height(80)
          Text('努力加载中..')
            .fontSize(16)
            .fontColor(Color.White)
        }
        .visibility(this.isLoading ? Visibility.Visible : Visibility.None)
        .width('100%')
        .height('100%')
        .backgroundColor('#40000000')
        .justifyContent(FlexAlign.Center)
      }
      .align(Alignment.Top)
      .width('100%')
      .height('100%')
    }
    .onClick(() => {
      inputMethod.getController().stopInputSession()
    })
    .hideTitleBar(true)
    .width('100%')
    .height('100%')
    .backgroundColor(this.backgroundColorView??'#ffffff')
    .onBackPressed(() => {
      if (this.onBackEvent) {
        this.onBackEvent()
      } else if (this.pageInfos) {
        this.pageInfos.pop()
      }
      return true
    })
  }
}