#跟着若城学鸿蒙# UI组件篇-时间滑动选择器弹窗 (TimePickerDialog) 及其属性

在现代应用程序开发中，用户界面的交互性和用户体验至关重要。时间选择器作为常见的 UI 组件，广泛应用于各种场景，如预约、提醒、日志记录等。ArkUI 提供了强大的时间滑动选择器弹窗（TimePickerDialog），使得开发者能够轻松地在应用中集成时间选择功能。本文将详细介绍 ArkUI 中的 TimePickerDialog，包括其基本概念、使用方法、配置选项、样式设置、事件回调以及实际应用示

Huang兄

690人浏览 · 2025-05-21 18:37:38

Huang兄 · 2025-05-21 18:37:38 发布

引言

基本概念

TimePickerDialog 是什么？

TimePickerDialog 是 ArkUI 提供的一个时间选择器弹窗组件，允许用户在弹窗中通过滑动选择器选择具体的时间。它支持 12 小时制和 24 小时制，并提供了丰富的配置选项和样式设置，以满足不同应用场景的需求。

主要特点

灵活的配置选项：支持 12 小时制和 24 小时制、自定义文本和按钮样式、悬停态下的布局调整等。
丰富的样式设置：可以自定义文本颜色、字号、字体粗细、按钮样式等。
事件回调：提供多种事件回调，如确定按钮点击、取消按钮点击、时间改变等。
易用性强：通过简单的 API 调用即可集成到应用中。

使用方法

基本用法

要在应用中使用 TimePickerDialog，首先需要导入相关模块并创建一个 TimePickerDialog 实例。以下是一个基本的示例：

@Entry
@Component
struct CalendarPickerDialogExample {
  private selectedDate: Date = new Date("2024-04-23")

  build() {
    Column() {
      Button("Show DatePickerDialog").margin(20).onClick(() => {
        console.info("CalendarDialog.show")
        
        TimePickerDialog.show({
          selected: new Date(), onAccept: (value) => {
            console.log('Selected time:', value);
          }, onCancel: () => {
            console.log('Dialog canceled');
          },
        });
      }
      )
    }.width('100%')
  }
}

配置选项

TimePickerDialog 支持多种配置选项，以满足不同的需求。以下是一些常用的配置选项：

selected: 设置默认选中的时间。
useMilitaryTime: 是否使用 24 小时制。
disappearTextStyle: 设置最上和最下两个选项的文本样式。
textStyle: 设置中间选项的文本样式。
selectedTextStyle: 设置选中项的文本样式。
acceptButtonStyle: 设置确定按钮的样式。
cancelButtonStyle: 设置取消按钮的样式。
alignment: 设置弹窗在竖直方向上的对齐方式。
offset: 设置弹窗相对于对齐位置的偏移量。
maskRect: 设置弹窗遮蔽层区域。

示例代码

以下是一个更复杂的示例，展示了如何配置 TimePickerDialog 的各种选项：

@Entry
@Component
struct CalendarPickerDialogExample {

  build() {
    Column() {
      Button("Show TimePickerDialog").margin(20).onClick(() => {
        console.info("CalendarDialog.show")

        TimePickerDialog.show({
          selected: new Date(),
          useMilitaryTime: true,
          disappearTextStyle: { color: '#ff0000', font: { size: '15fp', weight: 'Lighter' } },
          textStyle: { color: '#000000', font: { size: '20fp', weight: 'Normal' } },
          selectedTextStyle: { color: '#0000ff', font: { size: '30fp', weight: 'Bolder' } },
          acceptButtonStyle: {
            fontColor: '#ff0000',
            fontSize: '16fp',
            backgroundColor: '#ffffff',
            borderRadius: 10
          },
          cancelButtonStyle: {
            fontColor: '#0000ff',
            fontSize: '16fp',
            backgroundColor: '#ffffff',
            borderRadius: 10
          },
          alignment: DialogAlignment.Center,
          offset: { dx: 0, dy: 50 },
          maskRect: {
            x: 0,
            y: 0,
            width: '100%',
            height: '100%'
          },
          onAccept: (value) => {
            console.log('Accepted time:', value);
          },
          onCancel: () => {
            console.log('Dialog canceled');
          },
          onChange: (value) => {
            console.log('Time changed:', value);
          },
        });
      }
      )
    }.width('100%')
  }
}

样式设置

TimePickerDialog 支持多种样式设置，包括文本颜色、字号、字体粗细、按钮样式等。以下是一些常用的样式设置选项：

disappearTextStyle: 设置最上和最下两个选项的文本样式。
textStyle: 设置中间选项的文本样式。
selectedTextStyle: 设置选中项的文本样式。
acceptButtonStyle: 设置确定按钮的样式。
cancelButtonStyle: 设置取消按钮的样式。

示例代码

以下是一个示例，展示了如何设置 TimePickerDialog 的样式：

@Entry
@Component
struct CalendarPickerDialogExample {
  build() {
    Column() {
      Button("Show TimePickerDialog").margin(20).onClick(() => {
        console.info("CalendarDialog.show")

        TimePickerDialog.show({
          selected: new Date(),
          disappearTextStyle: { color: '#ff0000', font: { size: '15fp', weight: 'Lighter' } },
          textStyle: { color: '#000000', font: { size: '20fp', weight: 'Normal' } },
          selectedTextStyle: { color: '#0000ff', font: { size: '30fp', weight: 'Bolder' } },
          acceptButtonStyle: {
            fontColor: '#ff0000',
            fontSize: '16fp',
            backgroundColor: '#ffffff',
            borderRadius: 10
          },
          cancelButtonStyle: {
            fontColor: '#0000ff',
            fontSize: '16fp',
            backgroundColor: '#ffffff',
            borderRadius: 10
          },
          onAccept: (value) => {
            console.log('Accepted time:', value);
          },
          onCancel: () => {
            console.log('Dialog canceled');
          },
        });
      }
      )
    }.width('100%')
  }
}

事件回调

TimePickerDialog 提供了多种事件回调，以便开发者可以在用户进行操作时执行相应的逻辑。以下是一些常用的事件回调：

onAccept: 点击确定按钮时触发。
onCancel: 点击取消按钮时触发。
onChange: 时间改变时触发。
onDidAppear: 弹窗弹出时触发。
onDidDisappear: 弹窗消失时触发。
onWillAppear: 弹窗显示动效前触发。
onWillDisappear: 弹窗退出动效前触发。

示例代码

以下是一个示例，展示了如何使用事件回调：

 TimePickerDialog.show({
          selected: new Date(),
          onAccept: (value) => {
            console.log('Accepted time:', value);
          },
          onCancel: () => {
            console.log('Dialog canceled');
          },
          onChange: (value) => {
            console.log('Time changed:', value);
          },
          onDidAppear: () => {
            console.log('Dialog appeared');
          },
          onDidDisappear: () => {
            console.log('Dialog disappeared');
          },
          onWillAppear: () => {
            console.log('Dialog will appear');
          },
          onWillDisappear: () => {
            console.log('Dialog will disappear');
          },
        });

结论

ArkUI 提供的 TimePickerDialog 是一个功能强大且易于使用的组件，能够帮助开发者快速集成时间选择功能到应用中。通过丰富的配置选项、样式设置和事件回调，开发者可以灵活地定制时间选择器的外观和行为，以满足不同应用场景的需求。希望本文能够帮助您更好地理解和使用 ArkUI 中的 TimePickerDialog。

----

以上