鸿蒙UI开发——时间选择器对话框(TimePickerDialog)

最新推荐文章于 2025-06-11 14:45:20 发布

原创

最新推荐文章于 2025-06-11 14:45:20 发布 · 1.3k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ui #华为 #鸿蒙

1、概述

在我们项目开发过程中，时常会遇到时间选择器的场景（如下图），ArkUI为我们提供了一套时间选择对话框，本文针对时间选择对话框的使用做简单介绍。

2、接口说明

我们可根据24小时的时间区间，创建时间滑动选择器弹窗，将时间信息清晰地展示在弹出的窗口上。

时间滑动选择器弹窗通过UIContext中的showTimePickerDialog接口实现，showTimePickerDialog接口定义如下：

showTimePickerDialog(options: TimePickerDialogOptions): void

其中TimePickerDialogOptions是入参选项，可以支持的属性罗列如下：

名称	类型	说明
selected	Date	设置选中项的时间。默认值：当前系统时间从API version 10开始，该参数支持$$双向绑定变量。
format	TimePickerFormat	指定需要显示的TimePicker的格式。默认值：TimePickerFormat.HOUR_MINUTE
useMilitaryTime	boolean	展示时间是否为24小时制，默认为12小时制。默认值：false 说明：当展示时间为12小时制时，上下午与小时无联动关系。
disappearTextStyle	PickerTextStyle	设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。默认值：{color: '#ff182431',font: {size: '14fp',weight: FontWeight.Regular}}
textStyle	PickerTextStyle	设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。默认值：{color: '#ff182431',font: {size: '16fp',weight: FontWeight.Regular}}
selectedTextStyle	PickerTextStyle	设置选中项的文本颜色、字号、字体粗细。默认值：{color: '#ff007dff',font: {size: '20vp',weight: FontWeight.Medium}}
acceptButtonStyle	PickerDialogButtonStyle	设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。说明：acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，二者primary字段均配置为true时均不生效。
cancelButtonStyle	PickerDialogButtonStyle	设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。说明：acceptButtonStyle与cancelButtonStyle中最