鸿蒙开发 -- 自定义弹窗

CustomDialogController

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

他有两个固定方法

open(): void

显示自定义弹窗内容

close(): void

关闭显示的自定义弹窗

页面

// 引入自动以弹窗
import { CustomDialogExample } from './poupop'

@Entry
@Component
struct Index {
  // 页面需要显示从自定义弹窗获取的值
  @State answer:string = ''
  
  // 自定义弹窗的控制器
  dialogController: CustomDialogController = new CustomDialogController({

    // CustomDialogExample 是自定义弹窗的导入名称
    builder: CustomDialogExample({
        
      // 定义一个函数，给自定义弹窗使用
      confirm: (value: string) => {

        // 获取自定义弹窗传过来的数值
        this.answer = value
      }
    })
  })

  build() {
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
        // 题目  1+1=？
        Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.Center}) {
          Text('1+1=').fontSize(25)
          Text(this.answer).fontSize(25).fontWeight(500)
        }.padding(20)
        // 按钮  点击按钮 弹出弹窗
        Button('求和', { type: ButtonType.Capsule, stateEffect: true })
          .width(100).height(40).fontSize(20).onClick(() => {

          // 显示自定义弹窗的方法
          this.dialogController.open()
        })
    }
    .height('100%')
  }
}

自定义弹窗 

@CustomDialog
export struct CustomDialogExample {
  // 用户输入文本框的值
  value:string = ''
  
  // 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后
  controller: CustomDialogController
  
  // 定义确认按钮的方法
  confirm: (value: string) => void

  build() {
    Flex({direction: FlexDirection.Column}) {
      // 文本框
      TextInput({ placeholder: '请输入你所求出的值' })
        .width('100%').height(60).fontSize(25).placeholderFont({ size: 20, weight: 400 }).onChange((value: string) => {
        this.value = value
      }).margin({ bottom: 20 })

      // 按钮
      Flex({direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center}) {
        Button('取消', { type: ButtonType.Capsule, stateEffect: true }).fontSize(20).onClick(() => {
          this.cancel()
          this.controller.close()
        })
        Button('确认', { type: ButtonType.Capsule, stateEffect: true }).fontSize(20).onClick(() => {
          this.confirm(this.value)
          this.controller.close()
        })
      }
    }.padding(20).height(150)
  }
}