开始

在我们项目中很多用到弹框，比如隐私政策弹框、退出登录、提示弹框、下载框等等，但是发现自带的dialog有点不好用，所有自己手写了一个，接下来讲下怎么封装和使用，先上图

效果图

开发环境

Windows
DevEco Studio NEXT Developer Preview2
HarmonyOS next Developer Preview2
java version "11.0.18" 2023-01-17 LTS
hdc 1.2.0a
手机：Mate 60Pro (HarmonyOS NEXT Developer Preview2)

使用

编写页面布局，因为弹框有可能从底部、中央、上面弹出，这里我们用Stack布局，刚好实现我们的需求

scss 复制代码

build() {
  Stack() {
    Column({ space: 50 }) {
      Text('从底部弹').onClick(() => {
        this.showDialog(2)
      })
      Text('从中间弹').onClick(() => {
        this.showDialog(1)
      })
      Text('从上面弹').onClick(() => {
        this.showDialog(3)
      })
    }

    if (this.isShow) {
      CommonDialog({ isShow: this.isShow, dialogLocation: this.dialogLocation })
    }
  }.width('100%').height('100%')
}

封装一个显示showDialog方法供上层调用

typescript 复制代码

showDialog(location: number) {
  this.isShow = true
  this.dialogLocation = location
}

因为弹框里面的内容要从父组件往子组件传，这时候我们可以用@Provide、@Consume装饰器
先来看看官方是怎么解释这俩装饰器的

@Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。不同于上文提到的父子组件之间通过命名参数机制传递，@Provide和@Consume摆脱参数传递机制的束缚，实现跨层级传递。

其中@Provide装饰的变量是在祖先组件中，可以理解为被"提供"给后代的状态变量。@Consume装饰的变量是在后代组件中，去"消费（绑定）"祖先组件提供的变量。

定义几个变量，是否显示、展示位置和要传递下去的数据

less 复制代码

@Provide test: string = '纯血鸿蒙开发，从零基础到放弃 1153494342'
@State isShow: boolean = false
@State dialogLocation: number = 0 // 1 中央  2 底部  3 顶部

封装的万能弹框组件来了，很简单通过@Consume装饰器接受上层来的数据进行渲染，然后通过一个状态判断是否显示隐藏

less 复制代码

@Component
struct CommonDialog {
  @Consume
  test: string //接收到上层provide共享的数据
  @Link
  isShow: boolean
  @Link
  dialogLocation: number

  build() {
    Column() {
      Column() {
        Row() {
          Text('鸿蒙Next开发')
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .height(150)

        Text(this.test).margin({ bottom: 60 })
      }.width('100%')
      .backgroundColor('#fff')
      .borderRadius({
        topLeft: 16,
        topRight: 16,
        bottomLeft: this.dialogLocation === 1 ? 16 : 0,
        bottomRight: this.dialogLocation === 1 ? 16 : 0
      })
    }
    .onClick(() => {
      this.isShow = false
    })
    .height('100%')
    .width('100%')
    .justifyContent(
      this.dialogLocation === 1 ? FlexAlign.Center :
        this.dialogLocation === 2 ? FlexAlign.End :
          this.dialogLocation === 3 ? FlexAlign.Start :
          FlexAlign.Start)
    .backgroundColor('rgba(0,0,0,0.5)')
  }
}

好了，就这么简单，轻轻松松几行代码实现封装自定义view弹框

总结

其实用组件来封装的好处是防止后期官方对dialog一直改，而且这样封装基本上无侵入，开箱即用

本文正在参加华为鸿蒙有奖征文征文活动

【纯血鸿蒙】之全局万能弹框来了

开始

效果图

开发环境

使用

总结