当前位置: 首页 > news >正文

【时间盒子】-【10.自定义弹窗】CustomDialogController

Tips:

CustomDialogController

通过此类显示自定义弹窗,便于自定义弹窗的样式和内容。请参考官方文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-methods-custom-dialog-box-V5#customdialogcontroller

@BuilderParam

@BuilderParam装饰的方法只能被自定义构建函数(@Builder装饰的方法)初始化。请参考官方文档:

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-builderparam-0000001820999553#ZH-CN_TOPIC_0000001811317314__初始化builderparam装饰的方法

或参考我的帖子:https://developer.huawei.com/consumer/cn/forum/topic/0202152665588699279?fid=0101587866109860105

@Extend、@Styles

参考我的帖子:https://developer.huawei.com/consumer/cn/forum/topic/0207152407906111609?fid=0101587866109860105

一、预览

  1. 红色框:整个弹窗就是我们自定义的弹窗,从上至下分别是标题、内容、按钮,且它们都可自定义。①弹窗窗体的标题可自定义;②弹窗底部的按钮文本、点击触发的事件也是可以自定义。

  2. 蓝色框:弹窗显示的具体内容。根据点击不同的设置项,弹窗的内容可能不一样。比如:设置任务名称的弹窗要求输入任务名称的文本框;设置任务时长的弹窗要求选择时长;等等。

 

二、CommonDialog结构体

为了与普通组件区分,在component目录下新建dialog目录。右击目录dialog >> 新建 >> ArkTS File,文件命名为CommonDialog。

注意,CommonDialog是结构体struct,而不是普通的类class。给CommonDialog定义7个属性,分别是:窗体的标题title、控制器controller、确认按钮文本cfmText、确认按钮事件onConfirm、取消按钮文本btnText、取消按钮事件onCancel和窗体关闭的方法closer。代码如下:

import SizeUtil from '../../utils/SizeUtil';@Component
export default struct CommonDialog {private title?: string | Resource;private controller?: CustomDialogController;private onConfirm: () => void; //= () => {};private onCancel?: () => void;private btnText?: string | Resource = $r('app.string.cancel');private cfmText?: string | Resource = $r('app.string.confirm');@BuilderParam closer: () => void = () => {};build() {Column() {Text(this.title).width('100%').fontSize(SizeUtil.getVp($r('app.float.common_dialog_title_font_size'))).fontColor($r('app.color.grey_divider')).margin({bottom: SizeUtil.getVp($r('app.float.common_dialog_title_margin_vertical'))})// 占位this.closer();Row() {Button(this.btnText).onClick(() => {if (!this.controller) {return;}if(this.onCancel){this.onCancel();}this.controller.close();}).BtnStyle()if (this.onConfirm) {Button(this.cfmText).onClick(() => {this.onConfirm();if (!this.controller) {return;}this.controller.close();}).BtnStyle()}}.margin({top: SizeUtil.getVp($r('app.float.common_dialog_margin_vertical'))})}.width('100%').padding(SizeUtil.getVp($r('app.float.common_dialog_padding'))).justifyContent(FlexAlign.Center)}
}

 

三、按钮公共样式

把“取消”、“确定”按钮共同使用到的样式抽离出来,定义为公共样式,减少重复的代码。比如:按钮的背景色、按钮文本字体大小、字体颜色、按钮高度等。加在结构体代码的外部最后面,代码如下:

/*** 按钮样式*/
@Extend(Button) function BtnStyle() {.fontSize(SizeUtil.getFp($r('app.float.common_dialog_button_font_size'))).height(SizeUtil.getVp($r('app.float.common_dialog_button_height'))).layoutWeight(1).fontColor($r('app.color.green_light')).backgroundColor($r('app.color.trans_parent'))
}

 

四、其他文件更新的内容

string.json文件

考虑多语言,记得同时更新三个文件,

代码如下:

{"name": "confirm","value": "确定"
},
{"name": "cancel","value": "取消"
},

float.json文件

代码如下:

 

{"name": "common_dialog_title_font_size","value": "20"
},
{"name": "common_dialog_title_margin_vertical","value": "12"
},
{"name": "common_dialog_margin_vertical","value": "12"
},
{"name": "common_dialog_padding","value": "24"
},
{"name": "common_dialog_button_font_size","value": "15"
},
{"name": "common_dialog_button_height","value": "40"
}

color.json文件

代码如下:

{"name": "green_light","value": "#17A98E"
},
{"name": "trans_parent","value": "#00000000"
}

下一篇:弹窗中内容的自定义,比如设置任务名称、任务时长。


http://www.mrgr.cn/news/50148.html

相关文章:

  • 扭亏年只是开始,赛力斯的成长性仍在继续
  • LabVIEW智能可变温循环PCT测试系统
  • micro-memoize 缓存计算结果
  • 一文搞懂进程、线程、协程以及并发、并行、串行的概念
  • 解锁机器学习的新维度:元学习的算法与应用探秘
  • 【随手记】IE和精益的区别
  • CST学习笔记(二)Floquet模式激励设置
  • Java之反射机制详解
  • 【LLM】三种多轮对话微调数据格式
  • 《大道平渊》· 廿叁 —— 不要急着创业,潜龙勿用。
  • 外包干了5天,技术明显退步
  • 我是怎么赚到第一个100万的
  • Java多线程
  • MySQL中的增查操作:探索数据的奥秘,开启数据之门
  • 基于SSM+微信小程序的实验室设备故障报修管理系统2
  • 【JavaScript进阶】深入探讨JS中的对象及其事件处理
  • 四、Spring Boot集成Spring Security之认证流程
  • 命令注入和文件上传分析
  • 计组-CPU构成(运算器与控制器的组成)
  • Variadic function