藏在爱意中的玫瑰——CustomDialog自定义对话框

最新推荐文章于 2024-11-11 09:51:23 发布
最新推荐文章于 2024-11-11 09:51:23 发布
阅读量611 收藏 30
点赞数 30
文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_79379903/article/details/142471444
版权

        前言        

        隐墨是开发的CustomDialog组件以其独特的设计和智能的交互，在小镇上广受好评。在一次项目调试中，她遇到了他，一位同样热爱编程的男子。他的出现，就像是隐墨代码中缺失的那一行，让整个程序更加完美。

        他们一起在小镇的夜晚下，讨论着CustomDialog的每一个细节，从按钮的样式到对话框的动态效果，每一次的交流都让他们的关系更加紧密。他的逻辑思维与隐墨的创意碰撞，使得CustomDialog不仅功能强大，更充满了情感与生命力。

        在一个特别的夜晚，他通过CustomDialog向隐墨展示了一段特别的代码，当隐墨点击对话框时，屏幕上缓缓展开一幅由代码编织的画卷，上面写着：“在千万行代码中，我找到了你，我的隐墨。”这份浪漫的告白，如同他们共同编写的程序一样，精准而深情。

        一：CustomDialog基本属性

         1.1 基本概念和特性

        CustomDialog是鸿蒙操作系统（HarmonyOS）中的一个组件，它允许开发者创建高度可定制的自定义对话框。这些对话框可以用于多种用途，包括但不限于显示警告、确认操作、广告、中奖通知以及软件更新 等。开发者可以通过CustomDialogController类显示自定义弹窗，使得开发者可以根据应用的具体需求来设计对话框的外观和行为。

               CustomDialog的关键特性：

  • 自定义内容和布局：开发者可以通过定义结构体来构建对话框的内容，包括文本、图片、按钮等，从而实现完全自定义的对话框设计。
  • 事件处理：CustomDialog支持通过按钮等组件与用户交互，并可以定义回调函数来响应用户的操作，如点击确认或取消按钮。
  • 动画效果：可以通过设置动画参数来控制对话框的显示和隐藏效果，增强用户体验。
  • 样式定制：开发者可以自定义对话框的样式，包括背景色、圆角、阴影等，以匹配应用的整体设计。
  • 复杂交互：CustomDialog可以实现多层弹窗的嵌套，以及弹窗之间的联动操作，提供更为复杂的用户交互体验

        1.2 创建自定义弹窗

                        创建的步骤：

  1. 使用@CustomDialog装饰器装饰自定义弹窗，可在此装饰器内自定义弹窗内容。

  2. 创建构造器，与装饰器呼应相连。

  3. 点击与onClick事件绑定的组件使弹窗弹出。

@CustomDialog
struct CustomDialogExample {

  //创建一个自定义对话框（CustomDialog）的控制器实例。
  //CustomDialogController 是负责管理和控制自定义对话框显示、隐藏以及其他行为的类。

  // builder构造器使用回调函数作为入参，请注意使用this绑定问题
  // 如build: custombuilder({ callback: ()=> {...}})。
  // 若在builder构造器中监听数据变化请使用@Link，其他方式如@Prop、@ObjectLink不适用此场景。

  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })


  build() {
    Column() {
      Text('我是内容')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {

  //dialogController：创建一个CustomDialogController实例，用于控制自定义对话框的显示与隐藏。

  // builder: CustomDialogExample()：
  // 设置CustomDialogController的builder属性为CustomDialogExample，即自定义对话框的构建者。
  // CustomDialogExample是一个组件，它定义了对话框的内容和布局

  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample(),
  })

  build() {
    Column() {
      Button('打开新世界的大门')
        .onClick(() => {
          this.dialogController.open()   //显示与dialogController关联的自定义对话框。
        })
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

        实现的具体效果为

        

        1.3 弹窗的交互

                        创建的步骤：

  1. 在@CustomDialog装饰器内添加按钮，同时添加数据函数。但让调用者自己实现函数

  2. 页面内需要在构造器内进行接收，同时创建相应的函数操作。

  3. 弹窗通过定义openAnimation控制弹窗出现动画的持续时间，速度等参数。

    • duration: 动画的持续时间，单位为毫秒。
    • curve: 动画的执行曲线，Curve.Friction表示一种非线性动画曲线，类似物理摩擦效果
    • delay: 动画开始前的延迟时间，单位为毫秒。
    • layMode: 动画播放模式，PlayMode.Alternate表示动画将正反交替播放
    • onFinish: 动画完成时的回调函数，此处输出“play end”到控制台。

        4. 设置弹窗的相应的自定义的动画和样式


@CustomDialog
struct CustomDialogExample {

  //调用者去实现函数
  cancel?: () => void
  confirm?: () => void
  controller: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({})
  })

  build() {
    Column() {
      Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            if (this.confirm) {
              this.confirm()
            }
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: ()=> { this.onCancel() },
      confirm: ()=> { this.onAccept() },
    }),
    openAnimation: {
      duration: 1200,
      curve: Curve.Friction,
      delay: 500,
      playMode: PlayMode.Alternate,
      onFinish: () => {
        console.info('play end')
      }
    },
    alignment: DialogAlignment.Center,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false,
    backgroundColor: 0xd9ffffff,
    cornerRadius: 20,
    width: '80%',
    borderWidth: 1,
    borderStyle: BorderStyle.Dashed,//使用borderStyle属性，需要和borderWidth属性一起使用
    borderColor: Color.Blue,//使用borderColor属性，需要和borderWidth属性一起使用
    shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}),
  })

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  build() {
    Column() {
      Button('点击就有弹窗')
        .fontSize(20)
        .onClick(() => {
          this.dialogController.open()
        })
        .width(200)
    }
    .width('100%').height("100%")
    .justifyContent(FlexAlign.Center)
  }
}

        1.4 嵌套的定义弹窗        

        通过第一个弹窗打开第二个弹窗时，最好将第二个弹窗定义在第一个弹窗的父组件处，通过父组件传给第一个弹窗的回调来打开第二个弹窗。

        由于自定义弹窗在状态管理侧有父子关系，如果将第二个弹窗定义在第一个弹窗内，那么当父组件（第一个弹窗）被销毁（关闭）时，子组件（第二个弹窗）内无法再继续创建新的组件。

@CustomDialog
struct CustomDialogExampleTwo {
  
  //controllerTwo: 可选属性，用于控制外部的CustomDialogController
  controllerTwo?: CustomDialogController = new CustomDialogController({
    builder:CustomDialogExampleTwo({})
  })

  @State message: string = "I'm the second dialog box."
  @State showIf: boolean = false;
  build() {
    Column() {
      // 可以显示格外的内容
      if (this.showIf) {
        Text("Text")
          .fontSize(30)
          .height(100)
      }
      Text(this.message)
        .fontSize(30)
        .height(100)
      Button("Create Text")
        .onClick(()=>{
          this.showIf = true;
        })
      Button ('Close Second Dialog Box')
        .onClick(() => {
          if (this.controllerTwo != undefined) {
            this.controllerTwo.close()
          }
        })
        .margin(20)
    }
  }
}
@CustomDialog
struct CustomDialogExample {
  openSecondBox?: ()=>void
  controller?: CustomDialogController

  build() {
    Column() {
      Button ('Open Second Dialog Box and close this box')
        .onClick(() => {
          this.controller!.close();
          this.openSecondBox!();
        })
        .margin(20)
    }.borderRadius(10)
  }
}
@Entry
@Component
struct CustomDialogUser {
  @State inputValue: string = 'Click Me'
  dialogController: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExample({
      openSecondBox: ()=>{
        if (this.dialogControllerTwo != null) {
          this.dialogControllerTwo.open()
        }
      }
    }),
    cancel: this.exitApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })
  dialogControllerTwo: CustomDialogController | null = new CustomDialogController({
    builder: CustomDialogExampleTwo(),
    alignment: DialogAlignment.Bottom,
    offset: { dx: 0, dy: -25 } })

  aboutToDisappear() {
    this.dialogController = null
    this.dialogControllerTwo = null
  }

  onCancel() {
    console.info('Callback when the first button is clicked')
  }

  onAccept() {
    console.info('Callback when the second button is clicked')
  }

  exitApp() {
    console.info('Click the callback in the blank area')
  }
  build() {
    Column() {
      Button(this.inputValue)
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

        二： CustomDialog实践练习

        2.1 CustomDialog 修饰自定义弹窗

@CustomDialog
export default struct UserPrivacyDialog {

  //使用@CustomDialog装饰器装饰自定义弹窗,此装饰器内进行自定义内容（也就是弹框内容）
  controller: CustomDialogController = new CustomDialogController({builder: UserPrivacyDialog({})})

  //调用者去实现函数
  confirm?: () => void

  cancel?: () => void

  build() {
    Column({space:CommonConstants.SPACE_10}){
      // 1.标题
      Text($r('app.string.user_privacy_title')).fontSize(20).fontWeight(CommonConstants.FONT_WEIGHT_700)

      // 2.内容
      Text($r('app.string.user_privacy_content'))

      // 3.按钮
      Button($r('app.string.agree_label'))
        .width(150)
        .backgroundColor($r('app.color.primary_color'))
        .onClick(()=>{
          // 3.1 调用相应的函数
          if(this.confirm){
            this.confirm()
          }
          this.controller.close()   //关闭弹窗
        })

      Button($r('app.string.refuse_label'))
        .width(150)
        .backgroundColor($r('app.color.lightest_primary_color'))
        .fontColor($r('app.color.light_gray'))
        .onClick(()=>{
          if(this.cancel){
            this.cancel()
          }
          this.controller.close()
        })
    }
    .width('100%')
    .padding(15)
  }
}

        2.2 主页面的引用

@Entry
@Component
struct WelcomePage {

  context = getContext(this) as common.UIAbilityContext

  //页面内需要在构造器内进行接收，同时创建相应的函数操作
  controller: CustomDialogController = new CustomDialogController({
    builder: UserPrivacyDialog({
      confirm: (): void => this.onConfirm(),
      cancel: (): void => this.exitApp()
    })
  })

  async aboutToAppear() {

    //1.1 加载用户首选项
    let isAgree = await PreferenceUtil.getPreferenceValue(PREF_KEY,false)   //默认值就为false
    if(isAgree) {
      this.jumpToIndex()
    } else {
      //1.2 不同意弹窗打开
      this.controller.open()
    }
  }

  jumpToIndex(){
    //设置进入的延迟时间
    setTimeout(()=>{
      router.replaceUrl({
        url:'pages/Index'
      })
    },1000)  //1秒以后进行跳转
  }

  onConfirm() {
    //2.1. 保存首选项
    PreferenceUtil.putPreferenceValue(PREF_KEY,true)
    //2.2 跳转到首页
    this.jumpToIndex()
  }

  exitApp() {
    //1.退出app,自我毁灭
    this.context.terminateSelf()
  }

  build() {
    Column({ space: 10 }) {
      //1. 中央logan
      Row() {
        Image($r('app.media.home_slogan')).width(250)
      }.layoutWeight(1)

      //2. logan的标志
      Image($r('app.media.home_logo')).width(150)

      //3. 文字的描述
      Row() {
        Text('黑马健康支持').fontSize(12).opacity(0.8).fontColor(Color.White)
        Text('IPv6')//3.1 设置相应的边框样式
          .opacityWhiteText(0.8, 12)
          .border({
            style: BorderStyle.Solid,
            width: 1,
            color: Color.White,
            radius: 15
          })
          .padding({ left: 5, right: 5 })
        Text('网络').opacityWhiteText(0.8, 12)
      }

      Text(`'减更多'指给黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理`)
        .opacityWhiteText(0.6)

      Text('浙ICP备0000000号')
        .opacityWhiteText(0.6)
        .margin({ bottom: 20 })

    }
    .height('100%')
    .width('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

//将相同的属性进行封装
@Extend(Text) function opacityWhiteText(opacity:number,fontSize: number=10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}

        2.3 实现效果

        后言：

         "有志者，事竟成，破釜沉舟，百二秦关终属楚。" —— 范晔《后汉书》

在html中制作多彩照片墙,60个照片墙布置方案 记录浪漫时刻
weixin_39528467的博客
06-26 3082
照片墙在居家设计中有着重要的意义，现在也有越来越多的家庭在装修的时候为自己家设计一组漂亮的照片墙，这些照片墙可以表达不同的形式，让家居氛围更加温馨，如果你也喜欢照片墙可以选一些自己喜欢的照片或者装饰画，错落有致的挂在家中的墙面上，不仅温馨有趣，也为家装增添了个性的元素。一起来看看齐家网小编为您整理的60个照片墙布置方案吧，打造一面浪漫照片墙其实很简单。 PART1：打造照片墙必读手册>&gt...
【Turtle玫瑰汇总】温柔且浪漫至极——“玫瑰的花期到了“
顾木子吖的博客
11-03 1642
导语 往前走，别回头。——顾木子吖 咳咳，双十一有接到什么礼物嘛？——唯有玫瑰与你相称。​ ☀2021-11-10号 ☀晚上24：00分 ☀记得打开手机，查收我的礼物哦！ ​​叮！是来自我的礼物啦~前段时间承诺给大家的源码出了点儿问题，有点儿糟心，重新整理了一下。 今天这篇文章也是我送给大家的双十一礼物啦——之前写过的关于玫瑰的故事汇总，当当当，惊喜吧！ 今天统一给大家汇总一下：需要的小伙伴儿之后都在我主页左侧的流动文字哪里...
【HarmonyOS NEXT】使用CustomDialogController弹出对话框时，否能实现点击返回键时不会关闭对话框
Mayism123的博客
06-21 434
返回、侧滑关掉弹窗，这是系统控制的。界面上有弹窗时，进行返回操作会关闭弹窗，不会走onBackpress。希望的实现滑动和页面返回键时，退出应用，可以实现。实现方案就是在这个CustomDialogController创建的时候指定 cancel 属性的回调函数，该函数实现退出应用的效果。使用CustomDialogController弹出对话框时，如果点击物理返回键，会关闭对话框。如何实现点击返回键时不会关闭对话框？CustomDialogController / 对话框 / 返回键 / 不关闭。
Python实例30：程序员表达爱意的方式——一行代码画心
简时刻的博客
06-18 768
实例代码 运行结果
Modbus通信协议详解——浅谈如何在项目中实际应用！
Chen77777c的博客
04-07 2599
在讨论什么是Modbus之前，我们需要先了解一下工作学习中经常提到的“通信协议”是什么？通信协议是指双方实体完成通信或服务所必须遵循的规则和约定。这些规则或约定通常用于计算机与计算机之间的连接、网络设备与终端设备的连接，以及两层网络设备之间的连接。想要经过各种通信链路把处于不同位置的设备互连起来就需要一个数据通信系统，而想要实现互相通信，必须有一套彼此都共同遵守的通信约定。这些通信约定就是通信协议，也称为通信规程。通信协议是为网络数据交换而制定的规则、标准或约定。
原生滚动条丑的一比——自定义滚动条
weixin_41770018的博客
07-11 1055
拖动滚动条功能可以参考https://blog.csdn.net/weixin_41770018/article/details/80968384开门，放代码！！<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>自定义滚动条</
正则表达式——取拿代码中的标签和内容
爱意迷了眼丶的博客
02-16 488
正则表达式——取拿代码中的标签和内容
情人节——微信朋友圈浓浓爱意的9张拼图
红目香薰
02-14 561
上资源： 下面有图的，是框格图片： 组合效果 使用PS在中间加一张图片就行了，很方便。 例如，放一个对方的大头贴。 如果不会PS的，我稍后还会发一个纯HTML原生的。
学习之路——网页收藏
luck_xiang的博客
07-05 403
前言：今天在跟朋友聊天的时候，我把我收藏的网站给他看，他说他都把平时找到的东西直接复制到博客上面，听到这里我恍然大悟，我在上家公司收藏的网站博客都因为我的离开而没有了，为啥我就不能把这些东西放到我博客上面呢，这样不不会因为换了地方而重新搜索资料了，不管是在任何地方都能找到之前看过的资料，不过我就不复制代码了，把别人的网页地址复制过来就可以了，哈哈，偷个懒。 1、安卓巴士-安卓开发-Android
给情人的玫瑰与贺卡——七夕节情人节ppt模板.zip
09-09
"给情人的玫瑰与贺卡——七夕节情人节ppt模板.zip"是一个专为情人节设计的PowerPoint演示文稿模板，其特点和应用主要体现在以下几个方面： 1. **设计元素**：描述中提到的“爱心纸片文本框”是模板的核心设计之一，...
献给生命中那个她——爱情主题相册ppt模板.rar
09-08
在这个“献给生命中那个她——爱情主题相册ppt模板.rar”压缩包中，我们可以找到一个专门为表达爱意而设计的PowerPoint（PPT）模板。这个模板是为那些想要用独特方式展示与另一半共同回忆的人准备的。下面将详细探讨...
4小鹿的玫瑰花——小学生ppt学习课件
11-23
### 4小鹿的玫瑰花——小学生PPT学习课件 #### 教学目标与重点词汇 本课件旨在帮助二年级学生通过一个温馨的故事学习新的词汇和语法，并理解故事中蕴含的道理。教学过程中，教师将引导学生朗读课文、学习新词汇并...
制作520表白代码，让爱意在代码中绽放.docx
05-17
### 制作520表白代码，让爱意在代码中绽放 #### 一、心形图案表白 在520这样一个特殊的日子里，如果能够用编程语言来表达爱意，无疑会给对方带来一份惊喜与感动。对于喜欢编程的人而言，这种独特的表白方式既新颖...
给情人的玫瑰与贺卡——七夕节情人节PPT模板.ppt
07-08
"给情人的玫瑰与贺卡——七夕节情人节PPT模板.ppt" 提供了一个浪漫且具有创意的设计基础，可以帮助你轻松创建出表达爱意的幻灯片。这个模板不仅拥有精致的视觉元素，还提供了实用的编辑技巧，使你可以根据自己的需求...
鸿蒙进阶篇-剩余和展开、简单和复杂类型
2401_88463044的博客
11-09 1472
以下是关于“剩余和展开”“简单和复杂类型”概念的文章摘要： “剩余”参数使函数能够接收不定数量的额外参数，并以数组形式处理，增加了函数参数的灵活性。“展开”常见于数组或对象操作，如将数组元素或对象属性展开用于特定场景。 “简单类型”为基本的数据类型，如整数、浮点数等，具有固定大小和简单操作。“复杂类型”如数组、对象、类等，由多种简单或复杂类型组合而成，结构丰富，操作较复杂。 这些概念在编程中各自发挥重要作用，影响着数据处理和程序结构的设计。
HarmonyOS一次开发多端部署三巨头之功能级一多开发和工程级一多开发
2301_79624024的博客
11-10 1176
HarmonyOS一次开发多段部署之功能级一多开发和工程级一多开发
鸿蒙next版开发：ArkTS组件通用属性（组件标识）
小淼淼的博客
11-10 456
通过本文的介绍，你应该对HarmonyOS 5.0中ArkTS组件的标识有了基本的了解。组件标识是UI开发中的重要工具，合理利用这些属性可以使你的应用开发更加高效和灵活。希望本文能够帮助你在开发过程中更好地利用ArkTS的组件标识属性。
鸿蒙生态新机遇
最新发布
weixin_44626085的博客
11-11 474
近年来，随着智能设备的普及，鸿蒙操作系统应运而生，成为我们日常生活和工作中重要的技术工具。但在这片充满机遇的生态中，开发者们却面临着重重挑战。你是否曾感受到开发工具的不完善、技术难度的提升，及生态竞争的压力？在这篇文章中，我们将一一揭开鸿蒙生态中面临的挑战与机遇，帮助你更好地融入这个快速发展的技术世界。
探寻爱意，愚昧自我——《我喜欢你PPT模板》唤醒我内心的情感
在模板中，我们可以看到大量的矩形、圆形和直线等简单而明确的几何元素，这些元素的运用，使得演示内容更加直观易懂且富有层次感。 这个模板采用了经典的颜色搭配，蓝色作为主要的底色，给人以稳重和专业的感觉。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值