弹窗

promptAction

相当于Android toast

import promptAction from '@ohos.promptAction';
Button("无参数Toast")
  .onClick(() => {
    promptAction.showToast({
      message: "默认Toast"
    })
  })

Button("带参数Toast")
  .onClick(() => {
    promptAction.showToast({
      message: "bottom为300的位置", // 显示文本
      duration: 8000,              // 显示时长
      bottom: 300                  // 距离底部的距离
    })
  })

AlertDialog

一个按钮就只写confirm，两个按钮就写primaryButton和secondaryButton

AlertDialog.show(
  {
    title: 'title',// 名称
    message: 'text',// 文本
    autoCancel: true,
    alignment: DialogAlignment.Bottom, // 弹窗位置
    gridCount: 4, // 弹窗容器宽度所占用栅格数。跟分辨率有关
    offset: { dx: 0, dy: -20 },// 在 alignment 基础之上，偏移
    primaryButton: { // 两个button中左边的button
      value: 'cancel',
      action: () => {
        console.info('Callback when the first button is clicked')
      }
    },
    secondaryButton: { // 两个button中右边的button
      value: 'ok',
      action: () => {
        console.info('Callback when the second button is clicked')
      }
    },
    // confirm: { // 一个按钮
    //   value: 'button',
    //   action: () => {
    //     console.info('Button-clicking callback')
    //   }
    // },
    cancel: () => {
      console.info('Closed callbacks')
    }
  }
)

列表选择弹窗

ActionSheet

ActionSheet.show({
  title: 'ActionSheet title',
  message: 'message',
  autoCancel: true,
  confirm: {
    value: 'Confirm button',
    action: () => {
      console.log('Get Alert Dialog handled')
    }
  },
  cancel: () => {
    console.log('actionSheet canceled')
  },
  alignment: DialogAlignment.Bottom,
  offset: { dx: 0, dy: -10 },
  sheets: [
    {
      title: '一',
      action: () => {
        console.log('apples')
      }
    },
    {
      title: '二',
      action: () => {
        console.log('bananas')
      }
    },
    {
      title: '三',
      action: () => {
        console.log('pears')
      }
    }
  ]
})

自定义弹窗

需要@CustomDialog，并且 struct 类型来写

aboutToDisappear 把 controller设置成null

@CustomDialog
struct MyDialog {
  controllerTwo?: CustomDialogController
  build() {
    Column() {
      Text('我是文本弹窗')
        .fontSize(30)
        .height(100)
      Button('点我关闭第二个弹窗')
        .onClick(() => {
          if (this.controllerTwo != undefined) {
            this.controllerTwo.close()
          }
        })
    }
  }
}
dialogController: CustomDialogController = new CustomDialogController({
  builder: MyDialog(),
  autoCancel: true,
  alignment: DialogAlignment.Bottom,
  offset: { dx: 0, dy: -20 },
  gridCount: 4,
  customStyle: false
})
dialogController.open()

日期选择器 DatePickerDialog

DatePickerDialog.show({
  start: new Date("2000-1-1"),
  end: new Date("2100-12-31"),
  selected: this.selectedDate,
  onAccept: (value: DatePickerResult) => {
    // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
    this.selectedDate.setFullYear(value.year, value.month, value.day)
    console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
  },
  onCancel: () => {
    console.info("DatePickerDialog:onCancel()")
  },
  onChange: (value: DatePickerResult) => {
    console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
  }
})

时间滑动选择器弹窗 TimePickerDialog

TimePickerDialog.show({
  selected: this.selectTime,
  onAccept: (value: TimePickerResult) => {
    // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
    this.selectTime.setHours(value.hour, value.minute)
    console.info("TimePickerDialog:onAccept()" + JSON.stringify(value))
  },
  onCancel: () => {
    console.info("TimePickerDialog:onCancel()")
  },
  onChange: (value: TimePickerResult) => {
    console.info("TimePickerDialog:onChange()" + JSON.stringify(value))
  }
})

文本选择窗 TextPickerDialog

TextPickerDialog.show({
  range: this.fruits,
  selected: this.select,
  onAccept: (value: TextPickerResult) => {
    // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
    // this.select = value.index
    console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
  },
  onCancel: () => {
    console.info("TextPickerDialog:onCancel()")
  },
  onChange: (value: TextPickerResult) => {
    console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
  }
})

下面都在这里

TipsDialog 提示弹出框，即为带图形确认框，必要时可通过图形化方式展现确认框

SelectDialog 弹出纯列表弹出框。

ConfirmDialog 弹出文本+勾选弹出框。

LoadingDialog 进度条

dialogControllerImage: CustomDialogController = new CustomDialogController({
  builder: TipsDialog({
    imageRes: $r('sys.media.ohos_ic_public_voice'),
    content: '想要卸载这个APP嘛?',
    primaryButton: {
      value: '取消',
      action: () => {
        console.info('Callback when the first button is clicked')
      },
    },
    secondaryButton: {
      value: '删除',
      role: ButtonRole.ERROR,
      action: () => {
        console.info('Callback when the second button is clicked')
      }
    },
  }),