【时间盒子】-【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
一、预览
-
红色框：整个弹窗就是我们自定义的弹窗，从上至下分别是标题、内容、按钮，且它们都可自定义。①弹窗窗体的标题可自定义；②弹窗底部的按钮文本、点击触发的事件也是可以自定义。
-
蓝色框：弹窗显示的具体内容。根据点击不同的设置项，弹窗的内容可能不一样。比如：设置任务名称的弹窗要求输入任务名称的文本框；设置任务时长的弹窗要求选择时长；等等。
二、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"
}下一篇：弹窗中内容的自定义，比如设置任务名称、任务时长。
原文地址：https://blog.csdn.net/cdblh/article/details/142917820
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！