harmony 鸿蒙时间滑动选择器弹窗 (TimePickerDialog)

  • 2025-06-12
  • 浏览 (6)

时间滑动选择器弹窗 (TimePickerDialog)

以24小时的时间区间创建时间滑动选择器，展示在弹窗上。

说明：

  • 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

  • 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见UIContext说明。

  • 该组件不支持在Wearable设备上使用。

TimePickerDialog

show(deprecated)

static show(options?: TimePickerDialogOptions)

定义时间滑动选择器弹窗并弹出。

说明：

从API version 18开始废弃，建议使用UIContext中的showTimePickerDialog替代。

从API version 10开始，可以通过使用UIContext中的showTimePickerDialog来明确UI的执行上下文。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
options TimePickerDialogOptions 否 配置时间选择器弹窗的参数。

TimePickerDialogOptions对象说明

继承自TimePickerOptions。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称 类型 必填 说明
useMilitaryTime boolean 否 是否使用24小时制展示时间，默认为12小时制。
默认值：false
说明： 当展示时间为12小时制时，上下午与小时无联动关系。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
disappearTextStyle10+ PickerTextStyle 否 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。
默认值：
{
color: ‘#ff182431’,
font: {
size: ‘14fp’,
weight: FontWeight.Regular
}
}
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
textStyle10+ PickerTextStyle 否 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。
默认值：
{
color: ‘#ff182431’,
font: {
size: ‘16fp’,
weight: FontWeight.Regular
}
}
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
selectedTextStyle10+ PickerTextStyle 否 设置选中项的文本颜色、字号、字体粗细。
默认值：
{
color: ‘#ff007dff’,
font: {
size: ‘20fp’,
weight: FontWeight.Medium
}
}
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
acceptButtonStyle12+ PickerDialogButtonStyle 否 设置确认按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。
说明：
1.acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，如果同时设置为true，则primary字段不生效，保持默认值false。
2.按钮高度默认40vp，在关怀模式-大字体场景下高度不变，即使按钮样式设置为圆角矩形ROUNDED_RECTANGLE，呈现效果依然是胶囊型按钮Capsule。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
cancelButtonStyle12+ PickerDialogButtonStyle 否 设置取消按钮显示样式、样式和重要程度、角色、背景色、圆角、文本颜色、字号、字体粗细、字体样式、字体列表、按钮是否默认响应Enter键。
说明：
1.acceptButtonStyle与cancelButtonStyle中最多只能有一个primary字段配置为true，如果同时设置为true，则primary字段不生效，保持默认值false。
2.按钮高度默认40vp，在关怀模式-大字体场景下高度不变，即使按钮样式设置为圆角矩形ROUNDED_RECTANGLE，呈现效果依然是胶囊型按钮Capsule。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
alignment10+ DialogAlignment 否 设置弹窗在竖直方向上的对齐方式。
默认值：DialogAlignment.Default
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
offset10+ Offset 否 设置弹窗相对alignment所在位置的偏移量。
默认值：{ dx: 0 , dy: 0 }
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
maskRect10+ Rectangle 否 弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
默认值：{ x: 0, y: 0, width: ‘100%’, height: ‘100%’ }
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onAccept (value: TimePickerResult) => void 否 点击弹窗中的“确定”按钮时触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onCancel () => void 否 点击弹窗中的“取消”按钮时触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
onChange (value: TimePickerResult) => void 否 滑动弹窗中的选择器后，选项归位至选中项位置时，触发该回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
backgroundColor11+ ResourceColor 否 弹窗背板颜色。
默认值：Color.Transparent
说明：
当设置了backgroundColor为非透明色时，backgroundBlurStyle需要设置为BlurStyle.NONE，否则颜色显示将不符合预期效果。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
backgroundBlurStyle11+ BlurStyle 否 弹窗背板模糊材质。
默认值：BlurStyle.COMPONENT_ULTRA_THICK
说明：
设置为BlurStyle.NONE即可关闭背景虚化。当设置了backgroundBlurStyle为非NONE值时，则不要设置backgroundColor，否则颜色显示将不符合预期效果。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
backgroundBlurStyleOptions19+ BackgroundBlurStyleOptions 否 背景模糊效果。
原子化服务API： 从API version 19开始，该接口支持在原子化服务中使用。
backgroundEffect19+ BackgroundEffectOptions 否 背景效果参数。
原子化服务API： 从API version 19开始，该接口支持在原子化服务中使用。
onDidAppear12+ () => void 否 弹窗弹出时的事件回调。
说明：
1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。
2.在onDidAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。
3.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。
4. 当弹窗入场动效未完成时关闭弹窗，该回调不会触发。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onDidDisappear12+ () => void 否 弹窗消失时的事件回调。
说明：
1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onWillAppear12+ () => void 否 弹窗显示动效前的事件回调。
说明：
1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。
2.在onWillAppear内设置改变弹窗显示效果的回调事件，二次弹出生效。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
onWillDisappear12+ () => void 否 弹窗退出动效前的事件回调。
说明：
1.正常时序依次为：onWillAppear>>onDidAppear>>(onAccept/onCancel/onChange)>>onWillDisappear>>onDidDisappear。
2.快速点击弹出，消失弹窗时，存在onWillDisappear在onDidAppear前生效。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
shadow12+ ShadowOptions | ShadowStyle 否 设置弹窗背板的阴影。
当设备为2in1时，默认场景下获焦阴影值为ShadowStyle.OUTER_FLOATING_MD，失焦为ShadowStyle.OUTER_FLOATING_SM。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
dateTimeOptions12+ DateTimeOptions 否 设置时分是否显示前导0，目前只支持设置hour和minute参数。
默认值：
hour: 24小时制默认为”2-digit”，设置hour是否按照2位数字显示，如果实际数值小于10，则会补充前导0并显示，即为”0X”；12小时制默认为”numeric”，即没有前导0。
minute: 默认为”2-digit”，设置minute是否按照2位数字显示，如果实际数值小于10，则会补充前导0并显示，即为”0X”。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
enableHoverMode14+ boolean 否 是否响应悬停态。
默认值：false，默认不响应。
原子化服务API： 从API version 14开始，该接口支持在原子化服务中使用。
hoverModeArea14+ HoverModeAreaType 否 悬停态下弹窗默认展示区域。
默认值：HoverModeAreaType.BOTTOM_SCREEN
原子化服务API： 从API version 14开始，该接口支持在原子化服务中使用。
onEnterSelectedArea18+ Callback<TimePickerResult> 否 滑动过程中，选项进入分割线区域内，触发该回调。与onChange事件的差别在于，该事件的触发时机早于onChange事件，当当前滑动列滑动距离超过选中项高度的一半时，选项此时已经进入分割线区域内，会触发该事件。
说明：
当enableCascade设置为true时，由于上午/下午列与小时列存在联动关系，不建议使用该回调。该回调标识的是滑动过程中选项进入分割线区域内的节点，而联动变化的选项并不涉及滑动，因此，回调的返回值中，仅当前滑动列的值会正常变化，其余未滑动列的值保持不变。
原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。
enableCascade18+ boolean 否 设置12小时制时上午和下午标识是否会根据小时数自动切换。
默认值：false，false表示不开启自动切换，true表示开启自动切换。
原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。
enableHapticFeedback18+ boolean 否 设置是否开启触控反馈。
默认值：true，true表示开启触控反馈，false表示不开启触控反馈。
原子化服务API： 从API version 18开始，该接口支持在原子化服务中使用。
说明：
开启触控反馈时，需要在工程的module.json5中配置requestPermissions字段开启振动权限，配置如下：
“requestPermissions”: [{“name”: “ohos.permission.VIBRATE”}]

异常情形说明:

异常情形 对应结果
起始时间晚于结束时间 起始时间、结束时间都为默认值
选中时间早于起始时间 选中时间为起始时间
选中时间晚于结束时间 选中时间为结束时间
起始时间晚于当前系统时间，选中时间未设置 选中时间为起始时间
结束时间早于当前系统时间，选中时间未设置 选中时间为结束时间
时间格式不符合规范，如’01:61:61’ 取默认值

示例

说明：

推荐通过使用UIContext中的showTimePickerDialog来明确UI的执行上下文。

示例1（设置时间格式）

该示例通过useMilitaryTime、dateTimeOptions、format设置时间格式。

@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2020-12-25T08:30:00');

  build() {
    Column() {
      Button("TimePickerDialog 12小时制")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            selected: this.selectTime,
            format: TimePickerFormat.HOUR_MINUTE,
            useMilitaryTime: false,
            dateTimeOptions: { hour: "numeric", minute: "2-digit" },
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                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));
            },
            onDidAppear: () => {
              console.info("TimePickerDialog:onDidAppear()");
            },
            onDidDisappear: () => {
              console.info("TimePickerDialog:onDidDisappear()");
            },
            onWillAppear: () => {
              console.info("TimePickerDialog:onWillAppear()");
            },
            onWillDisappear: () => {
              console.info("TimePickerDialog:onWillDisappear()");
            }
          });
        })
      Button("TimePickerDialog 24小时制")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            selected: this.selectTime,
            format: TimePickerFormat.HOUR_MINUTE_SECOND,
            useMilitaryTime: true,
            onAccept: (value: TimePickerResult) => {
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            },
          })
        })
    }.width('100%')
  }
}

TimePickerDialog

示例2（自定义样式）

该示例通过配置disappearTextStyle、textStyle、selectedTextStyle、acceptButtonStyle、cancelButtonStyle实现了自定义文本以及按钮样式。

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2020-12-25T08:30:00');

  build() {
    Column() {
      Button("TimePickerDialog 24小时制")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            disappearTextStyle: { color: '#297bec', font: { size: 15, weight: FontWeight.Lighter } },
            textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal } },
            selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } },
            acceptButtonStyle: {
              type: ButtonType.Normal,
              style: ButtonStyleMode.NORMAL,
              role: ButtonRole.NORMAL,
              fontColor: 'rgb(81, 81, 216)',
              fontSize: '26fp',
              fontWeight: FontWeight.Bolder,
              fontStyle: FontStyle.Normal,
              fontFamily: 'sans-serif',
              backgroundColor: '#A6ACAF',
              borderRadius: 20
            },
            cancelButtonStyle: {
              type: ButtonType.Normal,
              style: ButtonStyleMode.NORMAL,
              role: ButtonRole.NORMAL,
              fontColor: Color.Blue,
              fontSize: '16fp',
              fontWeight: FontWeight.Normal,
              fontStyle: FontStyle.Italic,
              fontFamily: 'sans-serif',
              backgroundColor: '#50182431',
              borderRadius: 10
            },
            onAccept: (value: TimePickerResult) => {
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            }
          });
        })
    }.width('100%')
  }
}

TimePickerDialog

示例3（悬停态弹窗）

该示例展示了在折叠屏悬停态下设置dialog布局区域的效果。

@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2020-12-25T08:30:00');

  build() {
    Column() {
      Button("TimePickerDialog 12小时制")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            selected: this.selectTime,
            disappearTextStyle: { color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } },
            textStyle: { color: Color.Black, font: { size: 20, weight: FontWeight.Normal } },
            selectedTextStyle: { color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } },
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                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));
            },
            onDidAppear: () => {
              console.info("TimePickerDialog:onDidAppear()");
            },
            onDidDisappear: () => {
              console.info("TimePickerDialog:onDidDisappear()");
            },
            onWillAppear: () => {
              console.info("TimePickerDialog:onWillAppear()");
            },
            onWillDisappear: () => {
              console.info("TimePickerDialog:onWillDisappear()");
            },
            enableHoverMode: true,
            hoverModeArea: HoverModeAreaType.TOP_SCREEN
          });
        })
    }.width('100%')
  }
}

TimePickerDialog

示例4（设置弹窗位置）

该示例通过alignment和offset设置弹窗的位置。

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2020-12-25T08:30:00');

  build() {
    Column() {
      Button("TimePickerDialog")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            alignment: DialogAlignment.Center,
            offset: { dx: 20 , dy: 0 },
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            }
          });
        })
    }.width('100%')
  }
}

TimePickerDialog

示例5（设置遮蔽区）

该示例通过maskRect设置遮蔽区。

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2020-12-25T08:30:00');

  build() {
    Column() {
      Button("TimePickerDialog")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            maskRect: { x: 30, y: 60, width: '100%', height: '60%' },
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            }
          });
        })
    }.width('100%')
  }
}

TimePickerDialog

示例6（设置弹窗背板）

该示例通过maskRect设置弹窗背板。

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2020-12-25T08:30:00');

  build() {
    Column() {
      Button("TimePickerDialog")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            backgroundColor: 'rgb(204, 226, 251)',
            backgroundBlurStyle: BlurStyle.NONE,
            shadow: ShadowStyle.OUTER_FLOATING_SM,
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            }
          });
        })
    }.width('100%')
  }
}

TimePickerDialog

示例7（设置时间滑动选择器弹窗的起始时间）

该示例设置TimePickerDialog的起始时间。

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2022-07-22T08:50:00');

  build() {
    Column() {
      Button("TimePickerDialog")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            useMilitaryTime: false,
            selected: this.selectTime,
            format: TimePickerFormat.HOUR_MINUTE_SECOND,
            start: new Date('2022-07-22T08:30:00'),
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            }
          });
        })
    }.width('100%')
  }
}

TimePickerDialog

示例8（设置时间滑动选择器弹窗的结束时间）

该示例设置TimePickerDialog的结束时间。

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2022-07-22T08:50:00');

  build() {
    Column() {
      Button("TimePickerDialog")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            useMilitaryTime: false,
            selected: this.selectTime,
            format: TimePickerFormat.HOUR_MINUTE_SECOND,
            end: new Date('2022-07-22T15:20:00'),
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            }
          });
        })
    }.width('100%')
  }
}

TimePickerDialog

示例9（设置上午下午跟随时间联动）

该示例通过配置enableCascade实现12小时制时上午下午跟随时间联动。

// xxx.ets
@Entry
@Component
struct TimePickerDialogExample {
  private selectTime: Date = new Date('2022-07-22T08:00:00');

  build() {
    Column() {
      Button("TimePickerDialog")
        .margin(20)
        .onClick(() => {
          this.getUIContext().showTimePickerDialog({
            useMilitaryTime: false,
            selected: this.selectTime,
            enableCascade:true,
            onAccept: (value: TimePickerResult) => {
              // 设置selectTime为按下确定按钮时的时间，这样当弹窗再次弹出时显示选中的为上一次确定的时间
              if (value.hour != undefined && value.minute != undefined) {
                this.selectTime.setHours(value.hour, value.minute);
                console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
              }
            }
          });
        })
    }.width('100%')
  }
}

TimePicker

你可能感兴趣的鸿蒙文章

harmony 鸿蒙图像AI分析错误码

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙弹出框 (Dialog)

harmony 鸿蒙DialogV2

0  赞
  • 所属分类： 后端技术
  • 本文标签：
  • 版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/b2b6sg
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录