#深入浅出学习eTs#（十二）您的电量不足 原创

declare class CustomDialogController {
  constructor(value: CustomDialogControllerOptions); // 对话框控制器，控制弹框样式等
  open();                                            // 打开对话框
  close();                                           // 关闭对话框
}

// 配置参数的定义
declare interface CustomDialogControllerOptions {
  builder: any;                                      // 弹框构造器
  cancel?: () => void;                               // 点击蒙层的事件回调
  autoCancel?: boolean;                              // 点击蒙层是否自动消失
  alignment?: DialogAlignment;                       // 弹框在竖直方向上的对齐方式
  offset?: Offset;                                   // 根据alignment的偏移
  customStyle?: boolean;                             // 是否是自定义样式
  gridCount?: number;                                // grid数量
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
1.

@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  build() {
    Column() {
      Text('Software uninstall').width('70%').fontSize(20).margin({ top: 10, bottom: 10 })
      Image($r('app.media.icon')).width(80).height(80)
      Text('Whether to uninstall a software?').fontSize(16).margin({ bottom: 10 })
      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('cancel')
          .onClick(() => {
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({ bottom: 10 })
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.

@CustomDialog
struct CustomBatteryDialog  {
  controller: CustomDialogController
  cancel: () => void
  confirm: () => void

  build() {
    Stack() {
      Column() {
        Text('电池电量不足')
          .fontSize(22)
          .margin({top: 15})
          .fontColor(Color.Black)
        Text('还剩20%电量')
          .fontSize(17)
          .margin({top: 15})
          .fontColor(Color.Red)
        Text()
          .size({width: "100%", height: "2px"})
          .backgroundColor("#bebbc1")
          .margin({top: 15})
        Row() {
          Text("关闭")
            .height("100%")
            .layoutWeight(1)
            .textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor("#317ef5")
            .onClick(() => {
              this.controller.close(); // 关闭弹窗
            })
          Text()
            .size({width: "2px", height: "100%"})
            .backgroundColor("#bebbc1")
          Text("低电量模式")
            .textAlign(TextAlign.Center)
            .fontSize(20)
            .fontColor("#317ef5")
            .height("100%")
            .layoutWeight(1)
            .onClick(() => {
              this.controller.close(); // 关闭弹窗
            })
        }
        .height(45)
        .width('100%')
      }
      .backgroundColor("#e6ffffff")
      .borderRadius(20)
    }
    .padding({left: 40, right: 40})
    .width("100%")
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.

@Entry 
@Component 
struct Index {

  onPageShow() {
    this.controller.open()

  }

  build() {

  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.