CodeNewbie Community 🌱

ChanggnahC
ChanggnahC

Posted on

鸿蒙Next开发实战案例--用户隐私弹窗

#harmonyos

受后台友友要求，今天开发一个用户隐私保护弹窗

首先创建一个自定义组件privacyDialog：

@CustomDialog 

struct  privacyDialog{

  build(){

  }
}
Enter fullscreen mode Exit fullscreen mode

本文依然使用自定义弹窗CustomDialogController：

//弹窗控制器

controller: CustomDialogController
然后在自定义组件中添加相应内容，布局比较简单，不再细说，直接上代码：

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)
Enter fullscreen mode Exit fullscreen mode

在需要使用弹窗的页面中创建弹窗：

loadingDialogController: CustomDialogController = new CustomDialogController({

    builder: privacyDialog(),

    autoCancel: false,

    customStyle:true

  })
Enter fullscreen mode Exit fullscreen mode

注意此处customStyle设置true是为了自定义弹窗尺寸，customStyle设置false时点击空白区域弹窗不会关闭。最后创建一个按钮来打开弹窗：

Button('show')

          .fontColor(Color.White)

          .width(220)

          .height(60)

          .onClick(()=>{

            this.loadingDialogController.open()

          })
Enter fullscreen mode Exit fullscreen mode

以上就是今天的案例分享，感谢您的阅读。

Top comments (0)