【鸿蒙南向开发】OpenHarmony——ets自定义弹窗UI组件封装

于 2024-08-06 21:15:42 发布
阅读量878 收藏 30
点赞数 12
分类专栏： 前端 鸿蒙 安卓 文章标签： harmonyos ui 华为 android 鸿蒙 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HarmonyOS_666/article/details/140966521
版权
前端 同时被 3 个专栏收录
199 篇文章 0 订阅
订阅专栏
鸿蒙
199 篇文章 8 订阅
订阅专栏
安卓
198 篇文章 0 订阅
订阅专栏

前言

​ 鸿蒙已经提供了全局UI方法自定义弹窗，本文是基于基础的自定义弹窗来实现提示消息弹窗、确认弹窗、输入弹窗的UI组件封装。

一、消息确认弹窗

首先看下效果：
image.png

1.1、首先先定义一个新的组件ConfirmDialog

@CustomDialog
export default struct ConfirmDialog {
	title: string = ''
    content: string = ''
    confirmFontColor: string = '#E84026'
    cancelFontColor:string = '#0A59F7'
    confirmText:string = '确认'
    cancelText:string = '取消'
    controller: CustomDialogController
    cancel: () => void
    confirm: () => void
 	build(){}   
}

自定义确认弹窗可自定义传入的参数有：

​ 可选参数：标题title（默认值：“”），正文内容content（默认值：“”），确认按钮字体颜色confirmFontColor（默认值：#E84026），取消按钮字体颜色cancelFontColor（默认值：#0A59F7），确认按钮文案（默认值：确认），取消按钮文案（默认值：取消）

​ 必须参数：自定义弹窗控制器controller: CustomDialogController，确认按钮触发事件confirm()，取消按钮触发事件cancel()

1.2、标题、正文、按钮封装

一个确认弹窗组件主要由标题、正文等文本内容和取消、确认等按钮事件组成。下面将分别对文案和按钮通过**@Extend**装饰器进行封装。

@Extend装饰器将新的属性函数添加到内置组件上，如Text、Column、Button等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。

image.png

// 标题title与正文content自定义样式
@Extend(Text) function fancfontSize(fontSize: number) {
  .fontSize(fontSize)
  .width('100%')
  .fontColor('rgba(0, 0, 0, 0.86)')
  .textAlign(TextAlign.Center)
  .padding({ top: 15, bottom: 0, left: 8, right: 8 })
  .alignSelf(ItemAlign.Center)
  .margin({top: 16})
}

// 取消、确认按钮自定义样式
@Extend(Text) function fancBtn(fontColor: string) {
  .fontColor(fontColor)
  .backgroundColor(0xffffff)
  .width(188)
  .height(29)
  .fontSize(22)
  .textAlign(TextAlign.Center)
}

本示例仅标题与正文仅支持字体大小fontSize自定义，按钮仅支持按钮文案字体颜色fontColor自定义，其他通用属性皆是写定的，若想支持其他属性自定义，也可通过fancfontSize()添加新的参数。

其次，可以更进一步的对标题与正文通过@Builder装饰器进行封装，且通过是否传入title、content字段来判断是否展示对应文案。

@Builder装饰的方法用于定义组件的声明式UI描述，在 一个自定义组件内快速生成多个布局内容。 @Builder装饰方法的功能和语法规范与build函数相同。

// 文案样式
  @Builder TipTextStyle(tip:string, fontSize:number) {
    Text(tip)
      .fancfontSize(fontSize)
      .visibility(tip.length > 0 ? Visibility.Visible : Visibility.None)
  }

**注意：**1、@Extend装饰器的内容必须写在ConfirmDialog{}组件外，且在@Extend装饰器声明的基础内置组件的 方法之前不能出现用/*多行注释（会报错），但可采用单行注释//。

​ 2、@Builder装饰器的内容要写在ConfirmDialog{}组件内，build(){}外 。

​ 3、@Builder装饰器声明的自定义组件内部可包含@Extend声明的自定义样式的基础组件，但是@Extend 内部不可包含@Builder装饰器声明的自定义组件。

1.3、ConfirmDialog组件完整代码

// 取消、确认按钮自定义样式
@Extend(Text) function fancBtn(fontColor: string) {
  .fontColor(fontColor)
  .backgroundColor(0xffffff)
  .width(188)
  .height(29)
  .fontSize(22)
  .textAlign(TextAlign.Center)
}
// 标题title与正文content自定义样式
@Extend(Text) function fancfontSize(fontSize: number) {
  .fontSize(fontSize)
  .width('100%')
  .fontColor('rgba(0, 0, 0, 0.86)')
  .textAlign(TextAlign.Center)
  .padding({ top: 15, bottom: 0, left: 8, right: 8 })
  .alignSelf(ItemAlign.Center)
  .margin({top: 16})
}
@CustomDialog
export default struct ConfirmDialog {
  title: string = ''
  content: string = ''
  confirmFontColor: string = '#E84026'
  cancelFontColor:string = '#0A59F7'
  confirmText:string = '确认'
  cancelText:string = '取消'
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void
  // 标题、正文文案样式
  @Builder TipTextStyle(tip:string, fontSize:number) {
    Text(tip)
      .fancfontSize(fontSize)
      .visibility(tip.length > 0 ? Visibility.Visible : Visibility.None)
  }

  build() {
    Column() {
      this.TipTextStyle(this.title, 28)
      this.TipTextStyle(this.content, 22)
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Text(this.cancelText)
          .fancBtn(this.cancelFontColor)
          .onClick(() => {
          this.controller.close()
          this.cancel()
        })
        Text(this.confirmText)
          .fancBtn(this.confirmFontColor)
          .onClick(() => {
            this.controller.close()
            this.confirm()
          })
      }.margin({ top: 30, bottom: 16, left: 16, right: 16 })
    }
  }
}

1.4、引用页面代码

import ConfirmDialog from './components/dialog/ConfirmDialog.ets'
@Entry
@Component
struct IndexComponent {
    // 确认弹窗
    private title: string = '标题'
    private content: string = '此操作将永久删除该文件, 是否继续?'
    private confirmText: string = '删除'
    ConfirmDialogController: CustomDialogController = new CustomDialogController({
        builder: ConfirmDialog({ cancel: this.onCancel, confirm: () => {
            this.onAccept()
        },title:this.title, content: this.content}),
        cancel: this.onCancel,
        autoCancel: true
    })
    // 点击取消按钮或遮罩层关闭弹窗
    onCancel() {
        console.info('取消,关闭弹窗')
    }
    // 点击确认弹窗
    onAccept() {
        console.info('确认,关闭弹窗')
    }
    build() {
        Scroll() {
            Column() {
                Text('确认弹窗')
                    .fontSize(24)
                    .width(300)
                    .height(60)
                    .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Solid })
                    .margin({top: 20, bottom:10})
                    .textAlign(TextAlign.Center)
                    .onClick(() => {
                        this.ConfirmDialogController.open()
                    })
            }
            .width('100%')
        }
    }
}

二、消息提示弹窗

首先看下效果：
image.png

2.1、首先先定义一个新的组件PromptDialog

@CustomDialog
export default struct PromptDialog {
    controller: CustomDialogController
    ancel: () => void
	build() {}
}

至于标题、正文、按钮文案及按钮颜色的封装均与消息确认弹窗一样，同1.2所述。

2.2、PromptDialog组件完整代码

// 标题title与正文content自定义样式
@Extend(Text) function fancfontSize(fontSize: number) {
  .fontSize(fontSize)
  .width('100%')
  .fontColor('rgba(0, 0, 0, 0.86)')
  .textAlign(TextAlign.Center)
  .padding({ top: 15, bottom: 0, left: 8, right: 8 })
  .alignSelf(ItemAlign.Center)
  .margin({top: 16})
}
// 底部按钮自定义样式
@Extend(Text) function fancBtn(fontColor: string) {
  .backgroundColor(0xffffff)
  .fontColor(fontColor)
  .width(188)
  .height(29)
  .fontSize(22)
  .textAlign(TextAlign.Center)
}
@CustomDialog
export default struct PromptDialog {
  controller: CustomDialogController
  cancel: () => void
// 标题、正文文案样式
  @Builder TipTextStyle(tip:string, fontSize:number) {
    Text(tip)
      .fancfontSize(fontSize)
      .visibility(tip.length > 0 ? Visibility.Visible : Visibility.None)
  }

  build() {
    Column() {
      this.TipTextStyle($s('strings.title'), 28)
      this.TipTextStyle($s('strings.content'), 22)
      Flex({ justifyContent: FlexAlign.Center }) {
        Text($s('strings.confirm'))
          .fancBtn(0x0A59F7)
          .onClick(() => {
            this.controller.close()
          })
      }.margin({ top: 30, bottom: 16 })
    }
  }
}

若标题title与正文content中的文案是固定的，可如此示例一样，可采用写入到resource中的zh_CN和en_US文件中，通过$s(‘strings.title’)取值显示，若是动态获取的，可采用消息确认弹窗中传参方式。

image.png

2.3、引用页面代码

import PromptDialog from './components/dialog/PromptDialog.ets'
@Entry
@Component
struct IndexComponent {
    // 消息提示弹窗
    PromptDialogController: CustomDialogController = new CustomDialogController({
        builder: PromptDialog(),
        autoCancel: true
    })

    build() {
        Scroll() {
            Column() {
                Text('消息提示弹窗')
                    .fontSize(24)
                    .width(300)
                    .height(60)
                    .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Solid })
                    .margin({top: 20, bottom:10})
                    .textAlign(TextAlign.Center)
                    .onClick(() => {
                        this.PromptDialogController.open()
                    })
            }
            .width('100%')
        }
    }
}

三、消息输入弹窗

首先看下效果：

image.png

3.1、首先先定义一个新的组件InputDialog

export default struct InputDialog {
  title: string = ''
  content: string = ''
  @State inputString:string = ''
  controller: CustomDialogController
  cancel: () => void
  confirm: (data) => void

  build() {}
}

此示例讲述了子组件通过事件触发传参给父组件的方法，例如：在子组件用@state声明输入框内容inputString，通过confirm事件传参给父组件，可支持在父组件至于标题、正文、按钮文案及按钮颜色的封装均与消息确认弹窗一样，同1.2所述。

3.2、PromptDialog组件完整代码

// 取消、确认按钮自定义样式
@Extend(Text) function fancBtn(fontColor: string) {
  .fontColor(fontColor)
  .backgroundColor(0xffffff)
  .width(188)
  .height(29)
  .fontSize(22)
  .textAlign(TextAlign.Center)
}
// 标题title与正文content自定义样式
@Extend(Text) function fancfontSize(fontSize: number) {
  .fontSize(fontSize)
  .width('100%')
  .fontColor('rgba(0, 0, 0, 0.86)')
  .textAlign(TextAlign.Start)
  .padding({ top: 15, bottom: 0, left: 15, right: 15 })
  .margin({top: 16})
}
@CustomDialog
export default struct InputDialog {
  title: string = ''
  content: string = ''
  @State inputString:string = ''
  controller: CustomDialogController
  cancel: () => void
  confirm: (data) => void
  // 文案样式
  @Builder TipTextStyle(tip:string, fontSize:number) {
    Text(tip)
      .fancfontSize(fontSize)
      .visibility(tip.length > 0 ? Visibility.Visible : Visibility.None)
  }

  build() {
    Column() {
      this.TipTextStyle(this.title, 28)
      this.TipTextStyle(this.content, 22)
      // 输入框
      TextInput()
        .type(InputType.Normal)
        .enterKeyType(EnterKeyType.Next)
        .caretColor(Color.Green)
        .height(44)
        .margin({top: 20, left: 15; right:15})
        .alignSelf(ItemAlign.Center)
        .onChange((value: string) => {
          this.inputString = value
        })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Text($s('strings.cancel'))
          .fancBtn('#0A59F7')
          .onClick(() => {
          this.controller.close()
          this.cancel()
        })
        Text($s('strings.confirm'))
          .fancBtn('#E84026')
          .onClick(() => {
            this.controller.close()
            console.log('inputString:'+this.inputString)
            this.confirm(this.inputString)
          })
      }.margin({ top: 30, bottom: 16, left: 16, right: 16 })
    }
  }
}

image.png

3.3、引用页面代码

import InputDialog from './components/dialog/InputDialog.ets'
@Entry
@Component
struct IndexComponent {

// 输入弹窗
    private text: string = '提示'
    private label: string = '请输入您的姓名'
    InputDialogController: CustomDialogController = new CustomDialogController({
        builder: InputDialog({ cancel: this.onCancel, confirm: (data) => {
            this.confirm(data)
        },title: this.text, content: this.label }),
        cancel: this.onCancel,
        autoCancel: true
    })
// 点击取消按钮或遮罩层关闭弹窗
    onCancel() {
        console.info('取消,关闭输入弹窗')
    }
// 点击确认弹窗
    confirm(data) {
        console.info('确认,关闭输入弹窗,data:'+data)
    }

    build() {
        Scroll() {
            Column() {
                Text('输入弹窗')
                    .fontSize(24)
                    .width(300)
                    .height(60)
                    .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Solid })
                    .margin({top: 20, bottom:10})
                    .textAlign(TextAlign.Center)
                    .onClick(() => {
                        this.InputDialogController.open()
                    })
            }
            .width('100%')
        }
    }
}

总结

​ 本文仅仅实现了三种自定义弹窗UI组件的封装（传参方式也讲解了多种，具体传参方式可视具体情况而定），待笔者优化了功能、代码后在来与大家分享， 在最后欢迎鸿蒙各位大佬指教。

写在最后

●如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
●更多鸿蒙最新技术知识点，请移步前往小编：https://gitee.com/

在这里插入图片描述

「已注销」
关注
专栏目录
3.7、自定义弹窗（CustomDialog）
lujianfeiccie2009的专栏
04-17 199
使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。build() {Column() {Text('我是内容')3.创建构造器，与装饰器呼应相连。})4.点击与onClick事件绑定的组件使弹窗弹出})
鸿蒙HarmonyOS应用开发-自定义实现验证码框_鸿蒙开发字母验证码
2401_84181125的博客
04-21 1163
只需要稍微的封装下，将输入框的宽度、高度、圆角、颜色、输入类型、数量等包裹在一个对象中，使用@State修饰，并一一对应应用，即可将这个组件做成一个很标准的任意发挥的输入框啦。唯一的遗憾是，目前没法去除TextInput点击的样式，除非你是纯色（纯色变化看不出来…）以下就是该例子代码啦：@Preview@Componentbuild() {Stack() {= null) {Text(item)})
HarmonyOS开发案例：【 自定义弹窗】
鸿蒙的技术博客
04-26 966
基于ArkTS的声明式开发范式实现了三种不同的弹窗，第一种直接使用公共组件，后两种使用CustomDialogController实现自定义弹窗
鸿蒙5.0开发【鸿蒙自定义 Dialog 的 6 种方式】
最新发布
2401_82772199的博客
08-05 1412
自定义弹窗的最常规方式就是通过 CustomDialogController 类去控制显示自定义的弹窗或者浮层。
基于ArkUI现有能力实现自定义弹窗封装方案
hongxiaomeng的博客
05-09 510
【鸿蒙软件开发】自定义弹窗（CustomDialog）
m0_62599305的博客
10-25 5817
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。使用@CustomDialog装饰器装饰自定义弹窗。@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。
OpenHarmony实战开发-如何实现自定义弹窗 (CustomDialog)
m0_70749039的博客
04-27 1001
CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。
HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog）
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
01-25 4776
自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。
【鸿蒙开发细枝末节】自定义弹窗实现
yihanss的博客
04-09 1692
创建一个新文件，我这里起名叫build() {} }这个注解表示这个控件是对话框如果不写这个的话，无法被其他文件调用接下来我们在build里面写界面，先分析一下效果图：一个输入框TextInput，两个按钮Button水平排列，输入框和按钮竖直排列。最外层使用Column排列输入框和按钮，两个按钮使用Row包起来横排，按钮中间用Blank填充空隙。build() {Column() {TextInput({ placeholder: '请输入内容' }) //输入框。
OpenHarmony开发实战：构建多种样式弹窗（ArkTS），2024年最新鸿蒙面试2024
2301_82243558的博客
04-15 743
点击兴趣爱好选项，通过customDialogController.open方法弹出自定义弹窗，根据需要选择相应的兴趣爱好，效果如图所示：在view目录下，点击鼠标右键 > New > ArkTS File，新建一个ArkTS文件，然后命名为CustomDialogWeight子组件。在CustomDialogWeight的aboutToAppear方法，通过manager.getStringArrayValue方法获取本地资源数据进行初始化。return;if (!
OpenHarmony 文件操作功能fileio-extra
m0_71263309的博客
04-19 446
创建文件/文件夹。删除文件/文件夹。移动文件/文件夹（可选择是否覆盖同名文件/文件夹）。读写文件。清空文件夹。拷贝文件/文件夹。判断文件/文件夹是否存在。
鸿蒙OS开发实例：【工具类封装-首选项本地存储】
m0_62167422的博客
03-28 1561
而网上有关鸿蒙的开发资料非常的少，假如你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节省没必要的麻烦。由两位前阿里高级研发工程师联合打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技术知识点如果。
OpenHarmony多媒体-mp3agic
1
04-19 978
mp3agic 用于读取 mp3 文件和读取/操作 ID3 标签（ID3v1 和 ID3v2.2 到 ID3v2.4）,协助开发者处理繁琐的文件操作相关，多用于操作文件场景的业务应用。
OpenHarmony开发实战：自定义弹窗（ArkTS）
shudaoshanQAQ的博客
04-08 1912
本篇文章基于ArkTS的声明式开发范式实现了三种不同的弹窗，第一种直接使用公共组件，后两种使用CustomDialogController实现自定义弹窗
鸿蒙 自定义弹窗对CustomDialogController二次封装
huangwenkui1990的专栏
03-07 1254
鸿蒙官方提供了自定义customdialog，调用代码很臃肿，必须在当前页面创建customDialogController，否则无法正常弹窗dialog。2. 作为全局弹窗组件封装 内容完全由外部dialogContent定义。3.1. 具体实现，这里是ConfirmPop（对话框弹窗）3.2. 具体实现，这里是LoadingPop（加载中弹窗）解决方案：目前就定义了两种类型的dialog。1. 用于代理dialog的打开和关闭。
鸿蒙通用组件弹窗简介
lvsonghai的博客
05-08 1241
鸿蒙通用组件弹窗简介
【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— 弹窗组件
温的打怪之旅
03-17 4716
Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。具体效果如下（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。具体效果如下可使用全局方法显示警告对话框，具体用法可参考相关案例或者官方文档。下面给出一个案例@Entry@Componentbuild() {Column() {Button('删除')title: '删除该记录？', //弹窗标题message: '删除后无法恢复，您确认要删除吗？', //弹窗信息。
OpenHarmony实战开发-全局弹窗封装案例
2401_82546228的博客
05-08 892
本示例介绍两种弹窗的封装案例。一种是自定义弹窗封装成自定义组件的方式，使用一句代码即可控制显示；一种是使用子窗口的方式实现弹窗，使用一句代码即可展示。
"OHOS子系统开发与自定义UI组件：HSP方案详解与ACE UI框架
OHOS子系统开发与自定义UI组件 本文将对OHOS子系统开发与自定义UI组件进行详细介绍和讲解。以下是具体内容的目录： 01 应用间HSP方案详解 1. OH动态共享包 2. HSP使用场景 3. 应用间HSP及开发使用样例 02 子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值