#HarmonyOS NEXT 体验官# 鸿蒙next 隐私协议弹窗实现来我不允许你不会 原创

前言导读

各位同学大家，有段时间没有跟大家见面了，因为最近一直在更新鸿蒙的那个实战课程所以就没有去更新文章实在是不好意思， 所以今天就给大家更新一期实战案例 隐私协议弹窗 ，希望帮助到各位同学工作和学习

效果图

具体实现

• 弹窗逻辑

@CustomDialog
export struct LoadingDialog {

  controller: CustomDialogController

  build() {
    Stack() {

      Column(){
        Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceBetween}){
          Text('用户隐私保护提示')
            .fontColor(Color.White)
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .height(52)

          Row(){
            Image($r('app.media.img'))
              .width(68)
              .height(52)
              .margin({right:5})

            Image($r('app.media.close_img'))
              .width(20)
              .height(20)
              .onClick(()=>{
                this.controller.close()
              })

          }
          .height(52)
          .alignItems(VerticalAlign.Top)

        }
        .padding({top:18,left:12,right:12})
        .width(303)
        .height(70)
        .backgroundColor(Color.Green)
        .borderRadius({topLeft:4,topRight:5})

        Text('感谢您使用本小程序，您使用前应当阅读并同意《用户隐私保护指引》当您点击同意并继续使用该服务时，即表示您已理解并同意该条款内容。')
          .fontColor('#4a4a4a')
          .fontSize(17)
          .lineHeight(25)
          .margin({top:30})

        Text('同意')
          .width(240)
          .height(40)
          .backgroundColor('#50B452')
          .textAlign(TextAlign.Center)
          .fontColor(Color.White)
          .borderRadius(5)
          .margin({top:30})
          .onClick(()=>{
            this.controller.close()
          })

        Text('拒绝')
          .width(240)
          .height(40)
          .backgroundColor('#F7F7F7')
          .textAlign(TextAlign.Center)
          .fontColor('#4a4a4a')
          .borderRadius(5)
          .margin({top:20})
          .onClick(()=>{
            this.controller.close()
          })
      }
      .padding({left:12,right:12})
      .width(303)
      .height(353)
      .backgroundColor($r('app.color.color_white'))
      .borderRadius(5)


    }
  }
}

• 调用逻辑

• 我们在inext里面注册我们的dialog 后然后在button 的点击事件里面open打开弹窗即可

import { LoadingDialog } from '../components/LoadingDialog'


@Entry
@Component
struct Index {
  @State loadingTips: string = "加载中..."

  loadingDialogController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog(),
    autoCancel: false,
    customStyle:true
  })

onPageShow(){

}


  build() {
    Row() {
      Column() {
        Button('显示')
          .fontColor(Color.White)
          .width(220)
          .height(60)
          .onClick(()=>{
            this.loadingDialogController.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

最后总结：

上面的隐私协议弹窗我们只是实现了普通的界面展示 ，其实我们可以分包在 同意和去掉的两个text组件点击事件加上我们回调方法， 这样我们在index调用层就可以增加我们的回调方法，我们就可以处理点击之后逻辑。具体的各位同学可以自己在此代码基础拓展。今天的文章就讲到这个 有兴趣的同学可以继续研究 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 如果了解更多鸿蒙开发的知识 可以关注坚果派公众号 。 谢谢