【鸿蒙开发】弹窗组件AlertDialog，ActionSheet，DatePickerDialog，TimePickerDialog，TextPickerDialog_alertdialog.show

1. AlertDialog

显示警告弹窗。

AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons)

AlertDialogParamWithConfirm对象说明

AlertDialogParamWithButtons对象说明

DialogAlignment枚举说明

示例

@Entry
@Component
struct APage {
  build() {
    Column() {
      Button("警告弹窗，单个按钮").onClick(() => {
        AlertDialog.show({
          title: '操作提示', // 弹窗标题
          message: '你确认删除吗？', // 弹窗内容
          autoCancel: true, //点击遮障层时，是否关闭弹窗。
          alignment: DialogAlignment.Center, //弹窗位置
          gridCount: 3, // 弹窗容器宽度所占用栅格数
          offset: { dx: 0, dy: 0 }, //弹窗相对alignment所在位置的偏移量
 
          // 单个按钮
          confirm: {
            value: '确定',
            action: () => {
              console.info('xxxxxx')
            },
            fontColor: '#00f'
          },
        })
      })
 
      Button("警告弹窗，两个按钮").onClick(() => {
        AlertDialog.show({
          title: '操作提示', // 弹窗标题
          message: '你确认删除吗？', // 弹窗内容
          autoCancel: true, //点击遮障层时，是否关闭弹窗。
          alignment: DialogAlignment.Center, //弹窗位置
          gridCount: 3, // 弹窗容器宽度所占用栅格数
          offset: { dx: 0, dy: 0 }, //弹窗相对alignment所在位置的偏移量
 
          // 多个按钮
          primaryButton: { //主按钮的文本内容、文本色、按钮背景色和点击回调。
            value: '确认', //按钮文字
            action: () => { //按钮回调
              console.info('成功点击')
            },
            fontColor: '#f00'
          },
          secondaryButton: { //副按钮的文本内容、文本色、按钮背景色和点击回调。
            value: '取消', //按钮文字
            action: () => { //按钮回调
              console.info('取消了')
            },
            fontColor: '#00f'
          },
        })
      })
    }
    .width("100%")
    .height("100%")
  }
}

2. ActionSheet

显示列表选择弹窗。

ActionSheet.show(value: { title: string | Resource, message: string | Resource, confirm?: {value: string | Resource, action:() => void}, cancel?:()=>void, sheets: Array<SheetInfo>, autoCancel?:boolean, alignment?: DialogAlignment, offset?: { dx: number | string | Resource; dy: number | string | Resource } })

参数：

SheetInfo接口说明

示例

@Entry
@Component
struct APage {
  build() {
    Column() {
      Button("列表选择弹窗").onClick(() => {
        ActionSheet.show({
          title: '请选择水果',
          message: '水果信息',
          autoCancel: true,
          confirm: {
            value: '确认按钮',
            action: () => {
              console.log('确认点击成功')
            }
          },
          cancel: () => {
            console.log('你点击了关闭')
          },
          alignment: DialogAlignment.Bottom,
          offset: { dx: 0, dy: -20 },
          sheets: [
            {
              title: 'apples',
              action: () => {
                console.log('apples')
              }
            },
            {
              title: 'bananas',
              action: () => {
                console.log('bananas')
              }
            },
            {
              title: 'pears',
              action: () => {
                console.log('pears')
              }
            }
          ]
        })
      })
    }
    .width("100%")
    .height("100%")
  }
}

3. DatePickerDialog

显示日期滑动选择器弹窗。

DatePickerDialog.show(options?: DatePickerDialogOptions)

参数：

示例

@Entry
@Component
struct APage {
  selectedDate: Date = new Date("2010-1-1")
 
  build() {
    Column() {
      Button("阳历日期")
        .margin(20)
        .onClick(() => {
          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))
            }
          })
        })
 
      Button("阴历日期")
        .margin(20)
        .onClick(() => {
          DatePickerDialog.show({
            start: new Date("2000-1-1"),
            end: new Date("2100-12-31"),
            selected: this.selectedDate,
            lunar: true,
            onAccept: (value: DatePickerResult) => {
              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))
            }
          })
        })
    }
    .width("100%")
    .height("100%")
  }
}

4. TimePickerDialog

显示时间滑动选择器弹窗。

TimePickerDialog.show(options?: TimePickerDialogOptions)

TimePickerDialogOptions参数：

示例

@Entry
@Component
struct APage {
  private selectTime: Date = new Date('2020-12-25T08:30:00')
 
  build() {
    Column() {
      Button("TimePickerDialog 12小时制")
        .margin(20)
        .onClick(() => {
          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))
            }
          })
        })
      
      Button("TimePickerDialog 24小时制")
        .margin(20)
        .onClick(() => {
          TimePickerDialog.show({
            selected: this.selectTime,
            useMilitaryTime: true,
            onAccept: (value: TimePickerResult) => {
              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))
            }
          })
        })
    }
    .width("100%")
    .height("100%")
  }
}

5. TextPickerDialog

显示文本滑动选择器弹窗。

TextPickerDialog.show(options?: TextPickerDialogOptions)

TextPickerDialogOptions参数：

TextPickerResult对象说明

示例

@Entry
@Component
struct APage {
  private select: number = 2
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
 
  build() {
    Column() {
      Button("文本滑动选择器")
        .margin(20)
        .onClick(() => {
          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))
            }
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}