【鸿蒙开发】弹窗组件AlertDialog，ActionSheet，DatePickerDialog，TimePickerDialog，TextPickerDialog

鸿蒙开发arkts，AlertDialog警告弹窗，ActionSheet列表选择弹窗，DatePickerDialog日期选择弹窗，TimePickerDialog时间选择弹窗，TextPickerDialog文本选择弹窗

d312697510

3639人浏览 · 2024-04-08 14:29:24

d312697510 · 2024-04-08 14:29:24 发布

1. AlertDialog

显示警告弹窗。

AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons)

AlertDialogParamWithConfirm对象说明

参数名	参数类型	必填	参数描述
title	ResourceStr	否	弹窗标题。
message	ResourceStr	是	弹窗内容。
autoCancel	boolean	否	点击遮障层时，是否关闭弹窗。默认值：true
confirm	{ value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void }	否	确认按钮的文本内容、文本色、按钮背景色和点击回调。
cancel	() => void	否	点击遮障层关闭dialog时的回调。
alignment	DialogAlignment	否	弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default
offset	Offset	否	弹窗相对alignment所在位置的偏移量。
gridCount	number	否	弹窗容器宽度所占用栅格数。

AlertDialogParamWithButtons对象说明

参数名	参数类型	必填	参数描述
title	ResourceStr	否	弹窗标题。
message	ResourceStr	是	弹窗内容。
autoCancel	boolean	否	点击遮障层时，是否关闭弹窗。默认值：true
primaryButton	{ value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void; }	否	按钮的文本内容、文本色、按钮背景色和点击回调。
secondaryButton	{ value: ResourceStr, fontColor?: ResourceColor, backgroundColor?: ResourceColor, action: () => void; }	否	按钮的文本内容、文本色、按钮背景色和点击回调。
cancel	() => void	否	点击遮障层关闭dialog时的回调。
alignment	DialogAlignment	否	弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default
offset	Offset	否	弹窗相对alignment所在位置的偏移量。
gridCount	number	否	弹窗容器宽度所占用栅格数。

DialogAlignment枚举说明

名称	描述
Top	垂直顶部对齐。
Center	垂直居中对齐。
Bottom	垂直底部对齐。
Default	默认对齐。
TopStart8+	左上对齐。
TopEnd8+	右上对齐。
CenterStart8+	左中对齐。
CenterEnd8+	右中对齐。
BottomStart8+	左下对齐。
BottomEnd8+	右下对齐。

示例

@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 } })

参数：

参数名	参数类型	必填	参数描述
title	Resource \| string	是	弹窗标题。
message	Resource \| string	是	弹窗内容。
autoCancel	boolean	否	点击遮障层时，是否关闭弹窗。默认值：true
confirm	{ value: ResourceStr, action: () => void }	否	确认按钮的文本内容和点击回调。默认值： value：按钮文本内容。 action: 按钮选中时的回调。
cancel	() => void	否	点击遮障层关闭dialog时的回调。
alignment	DialogAlignment	否	弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Bottom
offset	{ dx: Length, dy: Length }	否	弹窗相对alignment所在位置的偏移量。{ dx: 0, dy: 0 }
sheets	Array<SheetInfo>	是	设置选项内容，每个选择项支持设置图片、文本和选中的回调。

SheetInfo接口说明

参数名	参数类型	必填	参数描述
title	ResourceStr	是	选项的文本内容。
icon	ResourceStr	否	选项的图标，默认无图标显示。
action	()=>void	是	选项选中的回调。

示例

@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)

参数：

参数名	参数类型	必填	默认值	参数描述
start	Date	否	Date('1970-1-1')	设置选择器的起始日期。
end	Date	否	Date('2100-12-31')	设置选择器的结束日期。
selected	Date	否	当前系统日期	设置当前选中的日期。
lunar	boolean	否	false	日期是否显示为农历。
onAccept	(value: DatePickerResult) => void	否	-	点击弹窗中的“确定”按钮时触发该回调。
onCancel	() => void	否	-	点击弹窗中的“取消”按钮时触发该回调。
onChange	(value: DatePickerResult) => void	否	-	滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。

示例

@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参数：

参数名	参数类型	必填	参数描述
selected	Date	否	设置当前选中的时间。默认值：当前系统时间
useMilitaryTime	boolean	否	展示时间是否为24小时制，默认为12小时制。默认值：false
onAccept	(value: TimePickerResult) => void	否	点击弹窗中的“确定”按钮时触发该回调。
onCancel	() => void	否	点击弹窗中的“取消”按钮时触发该回调。
onChange	(value: TimePickerResult) => void	否	滑动弹窗中的选择器使当前选中时间改变时触发该回调。

示例

@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参数：

参数名	参数类型	必填	参数描述
range	string[] \| Resource	是	设置文本选择器的选择范围。
selected	number	否	设置选中项的索引值。默认值：0
value	string	否	设置选中项的文本内容。当设置了selected参数时，该参数不生效。如果设置的value值不在range范围内，则默认取range第一个元素。
defaultPickerItemHeight	number \| string	否	设置选择器中选项的高度。
onAccept	(value: TextPickerResult) => void	否	点击弹窗中的“确定”按钮时触发该回调。
onCancel	() => void	否	点击弹窗中的“取消”按钮时触发该回调。
onChange	(value: TextPickerResult) => void	否	滑动弹窗中的选择器使当前选中项改变时触发该回调。

TextPickerResult对象说明

名称	类型	描述
value	string	选中项的文本内容。
index	number	选中项在选择范围数组中的索引值。

示例

@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%')
  }
}

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

【HarmonyOS 5】App Linking 应用间跳转详解

HarmonyOS开发者社区

HarmonyOS 开发者 “破界闯关” 问答挑战赛启动！多重奖品等你来战，解锁技术进阶新姿势！

你是否在 HarmonyOS 开发中遇到过设备适配难题？是否想深入了解 ArkUI 框架的最新特性？或是对原子化服务的落地应用充满疑问？现在，机会来了！2025年【HarmonyOS 开发者 “破界闯关” 问答挑战赛】正式开启，聚焦技术基础知识、设备开发、应用开发、分布式系统等各个领域，打造 “提问