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

与辉鸿蒙
发布于 2024-11-15 23:02
浏览
0收藏

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
一、预览
【时间盒子】-【10.自定义弹窗】CustomDialogController-鸿蒙开发者社区

  1. 红色框:整个弹窗就是我们自定义的弹窗,从上至下分别是标题、内容、按钮,且它们都可自定义。①弹窗窗体的标题可自定义;②弹窗底部的按钮文本、点击触发的事件也是可以自定义。
  2. 蓝色框:弹窗显示的具体内容。根据点击不同的设置项,弹窗的内容可能不一样。比如:设置任务名称的弹窗要求输入任务名称的文本框;设置任务时长的弹窗要求选择时长;等等。
    二、CommonDialog结构体
    为了与普通组件区分,在component目录下新建dialog目录。右击目录dialog >> 新建 >> ArkTS File,文件命名为CommonDialog。
    【时间盒子】-【10.自定义弹窗】CustomDialogController-鸿蒙开发者社区
    注意,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文件
考虑多语言,记得同时更新三个文件,
【时间盒子】-【10.自定义弹窗】CustomDialogController-鸿蒙开发者社区
代码如下:

{
  "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"
}

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
收藏
回复
举报
回复
    相关推荐