OpenHarmony——ets自定义弹窗UI组件封装 原创 精华
作者:凌小凤
前言
鸿蒙已经提供了全局UI方法自定义弹窗,本文是基于基础的自定义弹窗来实现提示消息弹窗、确认弹窗、输入弹窗的UI组件封装。
一、消息确认弹窗
首先看下效果:
1.1、首先先定义一个新的组件ConfirmDialog
自定义确认弹窗可自定义传入的参数有:
可选参数:标题title(默认值:“”),正文内容content(默认值:“”),确认按钮字体颜色confirmFontColor(默认值:#E84026),取消按钮字体颜色cancelFontColor(默认值:#0A59F7),确认按钮文案(默认值:确认),取消按钮文案(默认值:取消)
必须参数:自定义弹窗控制器controller: CustomDialogController,确认按钮触发事件confirm(),取消按钮触发事件cancel()
1.2、标题、正文、按钮封装
一个确认弹窗组件主要由标题、正文等文本内容和取消、确认等按钮事件组成。下面将分别对文案和按钮通过**@Extend**装饰器进行封装。
@Extend装饰器将新的属性函数添加到内置组件上,如Text、Column、Button等。通过**@Extend**装饰器可以快速定义并复用组件的自定义样式。
本示例仅标题与正文仅支持字体大小fontSize自定义,按钮仅支持按钮文案字体颜色fontColor自定义,其他通用属性皆是写定的,若想支持其他属性自定义,也可通过fancfontSize()添加新的参数。
其次,可以更进一步的对标题与正文通过@Builder装饰器进行封装,且通过是否传入title、content字段来判断是否展示对应文案。
@Builder装饰的方法用于定义组件的声明式UI描述,在 一个自定义组件内快速生成多个布局内容。 @Builder装饰方法的功能和语法规范与build函数相同。
**注意:**1、@Extend装饰器的内容必须写在ConfirmDialog{}组件外,且在@Extend装饰器声明的基础内置组件的 方法之前不能出现用/*多行注释(会报错),但可采用单行注释//。
2、@Builder装饰器的内容要写在ConfirmDialog{}组件内,build(){}外 。
3、@Builder装饰器声明的自定义组件内部可包含@Extend声明的自定义样式的基础组件,但是@Extend 内部不可包含@Builder装饰器声明的自定义组件。
1.3、ConfirmDialog组件完整代码
1.4、引用页面代码
二、消息提示弹窗
首先看下效果:
2.1、首先先定义一个新的组件PromptDialog
至于标题、正文、按钮文案及按钮颜色的封装均与消息确认弹窗一样,同1.2所述。
2.2、PromptDialog组件完整代码
若标题title与正文content中的文案是固定的,可如此示例一样,可采用写入到resource中的zh_CN和en_US文件中,通过$s(‘strings.title’)取值显示,若是动态获取的,可采用消息确认弹窗中传参方式。
2.3、引用页面代码
三、消息输入弹窗
首先看下效果:
3.1、首先先定义一个新的组件InputDialog
此示例讲述了子组件通过事件触发传参给父组件的方法,例如:在子组件用@state声明输入框内容inputString,通过confirm事件传参给父组件,可支持在父组件至于标题、正文、按钮文案及按钮颜色的封装均与消息确认弹窗一样,同1.2所述。
3.2、PromptDialog组件完整代码
3.3、引用页面代码
总结
本文仅仅实现了三种自定义弹窗UI组件的封装(传参方式也讲解了多种,具体传参方式可视具体情况而定),待笔者优化了功能、代码后在来与大家分享, 在最后欢迎鸿蒙各位大佬指教。
更多原创内容请关注:深开鸿技术团队
入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。
各个弹窗跟这老师好好学了一遍
.margin({top: 16})//为啥我这句代码报错
有个问题哈,要给这个自定义的弹窗传值该怎么传,貌似也没有传值的接口,比如显示:你用了xx步完成了目标,这个xx要如何传进去,希望能解答一下