【鸿蒙HarmonyOS开发笔记】如何自定义弹窗

创建自定义弹窗

自定义弹窗需要使用@CustomDialog装饰器装饰

在其中需要声明一个controller对象来控制弹窗，对象类型是CustomDialogController

@CustomDialog
export  struct Buttonfc{
  controller: CustomDialogController = new CustomDialogController({ builder: Buttonfc() })

  values:string = ''
  confirm:(value) => void
  build(){
      Column({space:20}){
        Text('请输入答案').fontSize(20)
        TextInput({placeholder:'请输入你的答案'}).type(InputType.Number)
          .onChange((value)=>{
            this.values = value
          })
        Row({space:60}){
          Button('确定').onClick((event: ClickEvent) => {
            this.confirm(this.values)
            this.controller.close()
          })
          Button('取消').onClick((event: ClickEvent) => {
            this.controller.close()
          })
        }
      }.padding(20)
  }
}
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

在需要使用的组件中，也需要声明一个controller对象来控制弹窗

controller: CustomDialogController = new CustomDialogController({
    builder:Buttonfc({
    confirm:(value)=>{
     	this.answer = value
    }}),
    alignment:DialogAlignment.Bottom,
    offset:{dx:0,dy:-20}
  })
1
2
3
4
5
6
7
8

其中confirm是弹窗组件的自定义函数

alignment可以控制弹窗的位置

offset控制弹窗相对位置的偏移量

---

打开弹窗就在父组件中使用controller.open()

this.controller.open()
1

关闭弹窗需要在弹窗组件中使用controller.close()

this.controller.close()
1

完整案例

弹窗组件代码：

@CustomDialog
export  struct Buttonfc{

  controller: CustomDialogController = new CustomDialogController({ builder: Buttonfc() })
  values:string = ''
  confirm:(value) => void
  
  build(){
      Column({space:20}){
        Text('请输入答案').fontSize(20)
        TextInput({placeholder:'请输入你的答案'}).type(InputType.Number)
          .onChange((value)=>{
            this.values = value
          })
        Row({space:60}){
          Button('确定').onClick((event: ClickEvent) => {
            this.confirm(this.values)
            this.controller.close()
          })
          Button('取消').onClick((event: ClickEvent) => {
            this.controller.close()
          })
        }
      }.padding(20)
  }
}


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

父组件代码：

import { Buttonfc } from './tc'
@Entry
@Component
struct CustomDialogPage {
  @State answer: string = '?'
  Tclist:string[] = ['1','2','3']
  indexs:number = 0
  controller: CustomDialogController = new CustomDialogController({
    builder:Buttonfc({confirm:(value)=>{
      this.answer = value
    }}),
    alignment:DialogAlignment.Bottom,
    offset:{dx:0,dy:-20}
  })

  build() {
    Column({ space: 50 }) {
      Row() {
        Text('1+1=')
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
        Text(this.answer)
          .fontWeight(FontWeight.Bold)
          .fontSize(30)
      }

      Button('作答')
        .onClick(() => {
          //弹窗
          this.controller.open()
        })
    }.width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

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