鸿蒙新特性——TimePicker 时间选择器组件详解
一、引言
时间选择是移动端应用中不可或缺的基础交互之一。闹钟应用中设置提醒时间、日程管理中选择会议开始时间、健身应用中设定训练时长——这些场景都需要一个高效、直观的时间选择器。在传统开发中，实现时间选择需要处理滚轮交互、时间格式化、范围限制、12/24 小时制切换等细节，开发成本不低。
HarmonyOS 提供了 TimePicker 组件——一个内置完整时间选择逻辑的滚轮式时间选择器。它支持 12 小时制和 24 小时制自由切换、循环滚动、时间范围限制、文本样式定制，通过声明式 API 即可完成复杂的时间选择交互。开发者只需绑定一个 Date 对象并监听 onChange 回调，TimePicker 负责剩下的所有 UI 和交互细节。
本文通过一个闹钟设置 Demo 深入讲解 TimePicker 组件的核心用法：如何绑定选中时间？如何切换 12/24 小时制？如何实现循环滚动？以及如何与闹钟列表联动，构建一个完整的闹钟管理功能。
阅读完本文，你将能够：
- 使用 TimePicker 替代自建时间选择方案
- 掌握
selected构造函数参数和TimePickerResult回调类型 - 使用
useMilitaryTime()控制 12/24 小时制显示 - 使用
loop()启用循环滚动 - 理解
onChange回调与状态联动的实现模式 - 构建完整的闹钟增删改查功能
二、TimePicker 组件 API 总览
2.1 构造函数
TimePicker(options?: TimePickerOptions)
TimePickerOptions 包含以下可选参数：
interface TimePickerOptions {
selected?: Date; // 默认选中时间，默认当前系统时间
format?: TimePickerFormat; // 时间格式（12h 或 24h），API 10 起已废弃，改用 useMilitaryTime()
start?: Date; // 可选的最早时间（API 24+）
end?: Date; // 可选的最晚时间（API 24+）
}
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
selected |
Date | 当前系统时间 | 初始选中的时间 |
format |
TimePickerFormat | - | 已废弃，改用 useMilitaryTime() |
start |
Date | - | 可选择的最早时间（API 24+） |
end |
Date | - | 可选择的最晚时间（API 24+） |
2.2 链式方法
// 12/24 小时制切换
.useMilitaryTime(value: boolean): TimePickerAttribute
// 是否循环滚动
.loop(value: boolean): TimePickerAttribute
// 时间变化回调
.onChange(callback: Callback<TimePickerResult>): TimePickerAttribute
// 文本样式（通过通用属性）
.fontSize(value: number | string | Resource): TimePickerAttribute
.fontColor(value: ResourceColor): TimePickerAttribute
| 方法 | 说明 |
|---|---|
useMilitaryTime(boolean) |
true 为 24 小时制，false 为 12 小时制（默认 false） |
loop(boolean) |
是否循环滚动（默认 true），即 23:59 后可继续滚到 00:00 |
onChange(Callback<TimePickerResult>) |
用户选择新时间时的回调，参数为 TimePickerResult 对象 |
2.3 TimePickerResult 类型
interface TimePickerResult {
hour: number; // 小时（0-23）
minute: number; // 分钟（0-59）
second?: number; // 秒（可选，部分设备支持）
}
注意：onChange 的回调参数是 TimePickerResult 而非 Date，与 DatePicker 的 onDateChange 不同。hour 始终返回 0-23 的小时数（不受 12h/24h 显示模式影响），minute 返回 0-59 的分钟数。
2.4 TimePicker vs 自建时间选择方案
| 特性 | TimePicker | 自建方案 |
|---|---|---|
| 滚轮交互 | 内置（系统级体验） | 需用 Scroll + Column 手动实现 |
| 12/24h 切换 | 一行 .useMilitaryTime() |
需手动处理显示逻辑 |
| 循环滚动 | 一行 .loop(true) |
需手动处理边界跳转 |
| 时间范围限制 | start/end 参数（API 24+） |
需手动校验 |
| 样式定制 | 有限（textStyle/selectedTextStyle） | 完全自由 |
| 与系统时间同步 | 自动 | 需手动获取系统时间 |
TimePicker 适合标准时间选择场景（闹钟、预约、提醒），自建方案适合需要高度定制 UI（如时钟表盘式选择）的场景。
三、Demo 设计：闹钟设置
3.1 功能概述
Demo 是一个闹钟设置页面，模拟手机闹钟应用的核心功能：
- 时间选择：通过 TimePicker 滚轮选择小时和分钟
- 12/24 小时制切换：Toggle 开关控制 TimePicker 的显示模式
- 添加闹钟：点击按钮将当前选中的时间添加到闹钟列表
- 闹钟列表管理：查看所有闹钟，支持启用/禁用和删除操作
- 状态统计：显示已启用闹钟数量
- 空状态提示：无闹钟时显示引导文案
- 自动标签：根据闹钟数量自动分配标签（起床、上班、午休、运动、学习、睡觉）
3.2 交互点
| # | 交互 | 说明 |
|---|---|---|
| 1 | TimePicker 滚轮选择 | 滚动选择小时和分钟，实时显示格式化后的时间 |
| 2 | 12/24 小时制 Toggle | 切换 TimePicker 显示模式和文字格式 |
| 3 | 添加闹钟按钮 | 将当前选中时间添加到闹钟列表 |
| 4 | 闹钟启用/禁用 Toggle | 控制每条闹钟的启用状态，影响显示样式和计数 |
| 5 | 删除闹钟 | 从列表中移除指定闹钟 |
 |
四、完整代码实现
4.1 数据模型定义
interface AlarmItem {
id: number;
hour: number;
minute: number;
enabled: boolean;
label: string;
}
AlarmItem 是闹钟的数据模型，包含唯一 ID、小时、分钟、启用状态和标签。使用接口定义确保类型安全。
4.2 状态变量
@State selectedHour: number = 7;
@State selectedMinute: number = 30;
@State useMilitaryTime: boolean = true;
@State alarms: AlarmItem[] = [];
@State nextId: number = 1;
@State selectedDate: Date = new Date(2025, 0, 1, 7, 30);
关键状态说明：
selectedHour/selectedMinute：当前 TimePicker 选中的小时和分钟，用于显示格式化时间useMilitaryTime：控制 TimePicker 的 24 小时制显示alarms：闹钟列表，使用@State装饰器确保数据变化触发 UI 更新selectedDate：绑定到 TimePicker 的 Date 对象，注意年份和月份会被忽略，只有小时和分钟有效nextId：自增 ID 生成器
4.3 TimePicker 核心配置
TimePicker({
selected: this.selectedDate
})
.useMilitaryTime(this.useMilitaryTime)
.loop(true)
.onChange((value: TimePickerResult) => {
this.selectedHour = value.hour;
this.selectedMinute = value.minute;
this.selectedDate = new Date(2025, 0, 1, value.hour, value.minute);
})
逐行解析：
selected: this.selectedDate：将 TimePicker 与一个 Date 对象绑定。TimePicker 只使用 Date 中的小时和分钟。当 Date 对象变化时（通过onChange更新），TimePicker 也会自动同步显示。.useMilitaryTime(this.useMilitaryTime)：true显示 24 小时制（0-23），false显示 12 小时制（上午/下午 + 1-12）。通过@State变量动态切换，切换时 TimePicker 自动重新渲染。.loop(true)：启用循环滚动。当用户滚到 23:59 继续向下滚时会回到 00:00，反之亦然。这在设置闹钟时非常实用——用户无需回滚一大段才能从一个极端值到达另一个极端值。.onChange()：每次用户滚动 TimePicker 到新时间时触发。回调参数是TimePickerResult类型，包含hour和minute属性。我们在回调中更新三个状态：selectedHour、selectedMinute（供 Text 组件显示格式化时间用），以及selectedDate（维持与 TimePicker 的双向绑定）。
注意：
onChange回调中的hour始终返回 0-23 的数值，不受useMilitaryTime显示模式的影响。也就是说，即使 TimePicker 显示为"下午 5:30"，value.hour仍然是 17。
4.4 时间格式化工具
formatTime(h: number, m: number): string {
if (this.useMilitaryTime) {
return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
}
const ampm = h >= 12 ? '下午' : '上午';
const h12 = h % 12 === 0 ? 12 : h % 12;
return `${ampm} ${h12}:${m.toString().padStart(2, '0')}`;
}
formatTime 方法根据当前 useMilitaryTime 状态格式化时间字符串：
- 24 小时制：格式如
07:30、14:05 - 12 小时制：格式如
上午 7:30、下午 2:05
注意 padStart(2, '0') 确保分钟始终两位数，小时在 24 小时制下也两位数。12 小时制下的小时转换逻辑：h % 12 注意 0 点和 12 点特殊处理，12 % 12 = 0 时需要显示 12。
4.5 闹钟增删改
addAlarm() {
const presetIdx = this.alarms.length % this.alarmPresets.length;
this.alarms = this.alarms.concat([{
id: this.nextId,
hour: this.selectedHour,
minute: this.selectedMinute,
enabled: true,
label: this.alarmPresets[presetIdx]
}]);
this.nextId++;
}
deleteAlarm(id: number) {
this.alarms = this.alarms.filter(a => a.id !== id);
}
toggleAlarm(id: number) {
this.alarms = this.alarms.map(a => {
if (a.id === id) {
return {
id: a.id,
hour: a.hour,
minute: a.minute,
enabled: !a.enabled,
label: a.label
} as AlarmItem;
}
return a;
});
}
三个操作都遵循 ArkTS @State 的不可变更新模式——创建新数组而非修改原数组：
- addAlarm()：使用
concat()在数组末尾追加新闹钟。标签通过alarms.length % alarmPresets.length循环分配预设标签（起床、上班、午休、运动、学习、睡觉），保证不同闹钟有不同的默认标签。 - deleteAlarm(id)：使用
filter()过滤掉指定 ID 的闹钟，返回新数组。 - toggleAlarm(id)：使用
map()遍历数组，对匹配 ID 的闹钟创建一个启用状态取反的新对象，其余保持不变。
重要：ArkTS 禁止使用对象展开运算符 (
...) 和数组展开运算符进行浅拷贝（arkts-no-spread）。必须显式构造新对象的每个属性，或使用concat()替代[...arr, item]。
4.6 计算属性
get enabledCount(): number {
return this.alarms.filter(a => a.enabled).length;
}
enabledCount 是一个 getter 计算属性，返回当前启用的闹钟数量。在 UI 中直接使用 this.enabledCount 即可获取实时数值，无需额外的 @State 变量。
4.7 UI 结构
build() {
Column() {
// 标题栏
Row() {
Text('⏰ 闹钟设置')
.fontSize(FontSize.HEADLINE)
.fontColor('#FFFFFF')
.fontWeight(FontWeight.Bold)
}
.width('100%').height(52)
.padding({ left: Spacing.LG, right: Spacing.LG })
.backgroundColor('#1a1a2e')
Scroll() {
Column() {
// 1. 说明卡片
// 2. TimePicker 显示区 + 格式化时间
// 3. 添加按钮 + 24h Toggle
// 4. 闹钟列表（有数据时显示）
// 5. 空状态（无数据时显示）
}
}
.layoutWeight(1)
.backgroundColor('#F2F3F5')
}
}
页面采用"标题栏 + 滚动内容区"的标准布局。内容区从上到下依次排列：组件介绍卡片 → TimePicker 展示区 → 操作按钮 → 闹钟列表或空状态。Scroll 确保内容较长时可以滚动查看。
4.8 TimePicker 展示区
TimePicker 的核心展示区域包含组件本身和格式化时间的 Text：
Column() {
Text('选择时间')
.fontSize(12)
.fontColor('#9999AA')
.fontWeight(FontWeight.Bold)
Column() {
TimePicker({ selected: this.selectedDate })
.useMilitaryTime(this.useMilitaryTime)
.loop(true)
.onChange((value: TimePickerResult) => {
this.selectedHour = value.hour;
this.selectedMinute = value.minute;
this.selectedDate = new Date(2025, 0, 1, value.hour, value.minute);
})
Text(this.formatTime(this.selectedHour, this.selectedMinute))
.fontSize(24)
.fontColor('#1a1a2e')
.fontWeight(FontWeight.Bold)
.fontFamily('monospace')
.margin({ top: 12 })
}
.width('100%')
.padding({ top: Spacing.MD, bottom: Spacing.MD })
.backgroundColor('#FFFFFF')
.borderRadius(12)
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
}
TimePicker 下方显示一个格式化后的时间预览，使用 monospace 等宽字体让数字对齐更美观。这个预览会随着 TimePicker 滚动和 12/24h 切换实时变化。
4.9 操作区域
Row() {
Button('+ 添加闹钟')
.fontSize(14)
.fontColor('#FFFFFF')
.backgroundColor('#1677FF')
.borderRadius(8)
.height(44)
.layoutWeight(1)
.onClick(() => { this.addAlarm(); })
Blank().width(12)
Column() {
Text('24小时制')
.fontSize(10)
.fontColor('#9999AA')
.margin({ bottom: 4 })
Toggle({ type: ToggleType.Switch, isOn: this.useMilitaryTime })
.selectedColor('#1677FF')
.onChange((value: boolean) => { this.useMilitaryTime = value; })
}
}
左侧是"添加闹钟"按钮（占据剩余空间），右侧是 24 小时制切换开关（固定宽度）。Toggle 使用 Switch 类型，.selectedColor('#1677FF') 设置激活态颜色。当 Toggle 状态改变时，所有已显示的时间格式和 TimePicker 显示都会同步切换。
4.10 闹钟列表
if (this.alarms.length > 0) {
Column() {
Row() {
Text('闹钟列表')
.fontSize(12).fontColor('#9999AA')
.fontWeight(FontWeight.Bold).layoutWeight(1)
Text(`${this.enabledCount} 个已启用`)
.fontSize(11).fontColor('#9999AA')
}
Column() {
ForEach(this.alarms, (alarm: AlarmItem, idx: number) => {
Column() {
Row() {
Column() {
Text(alarm.label)
.fontSize(15)
.fontColor(alarm.enabled ? '#1a1a2e' : '#BBBBCC')
.fontWeight(FontWeight.Bold)
Text(this.formatTime(alarm.hour, alarm.minute))
.fontSize(24)
.fontColor(alarm.enabled ? '#1a1a2e' : '#BBBBCC')
.fontWeight(FontWeight.Bold)
.fontFamily('monospace')
}
.alignItems(HorizontalAlign.Start)
.layoutWeight(1)
Toggle({ type: ToggleType.Switch, isOn: alarm.enabled })
.selectedColor('#1677FF')
.onChange(() => { this.toggleAlarm(alarm.id); })
Text('🗑')
.fontSize(16)
.onClick(() => { this.deleteAlarm(alarm.id); })
}
}
if (idx < this.alarms.length - 1) {
Divider().strokeWidth(0.5).color('#F2F3F5')
}
})
}
}
}
每条闹钟显示：标签 + 时间 + 启用/禁用开关 + 删除按钮。禁用状态的闹钟文字颜色变灰（#BBBBCC），视觉上与启用闹钟（#1a1a2e）区分。相邻闹钟之间用 Divider 分隔，最后一条不显示分隔线。
4.11 空状态
if (this.alarms.length === 0) {
Column() {
Text('🔕')
.fontSize(48)
.margin({ bottom: 12 })
Text('还没有闹钟')
.fontSize(15)
.fontColor('#9999AA')
.fontWeight(FontWeight.Medium)
Text('选择时间后点击"添加闹钟"')
.fontSize(12)
.fontColor('#BBBBCC')
.margin({ top: 4 })
}
.width('100%')
.padding({ top: 40, bottom: 40 })
.backgroundColor('#FFFFFF')
.borderRadius(BorderRadius.LG)
}
当 alarms 数组为空时，显示引导性的空状态提示，包含静音图标、标题文字和操作指引。这个设计让用户在没有闹钟时也知道下一步该做什么，而不是面对一个空白页面。
五、关键技术点详解
5.1 TimePickerResult 的 hour 属性
TimePickerResult.hour 始终返回 0-23 的小时数，不受 12/24 小时制显示模式的影响。这意味着：
// 即使用户在 12 小时制下选择 "下午 3:00"
// value.hour 的值仍然是 15，而不是 3
.onChange((value: TimePickerResult) => {
this.selectedHour = value.hour; // 始终 0-23
})
这个设计保证了数据层的一致性——无论 UI 如何展示，底层存储的时间数据都是 24 小时制的小时数。格式化显示时，我们使用 formatTime() 方法根据 useMilitaryTime 状态转换。
5.2 selected Date 对象的双向绑定
TimePicker 的 selected 参数接受一个 Date 对象。但 TimePicker 只使用 Date 中的小时和分钟字段，年、月、日会被忽略。在 onChange 回调中，我们更新 selectedDate 以同步状态：
this.selectedDate = new Date(2025, 0, 1, value.hour, value.minute);
这里的关键是：必须创建一个新的 Date 对象，而不是修改原对象的属性。这是因为 @State 的不可变更新机制——只有当对象引用发生变化时，ArkUI 才会检测到状态变更并触发 UI 刷新。
5.3 useMilitaryTime 的 UI 影响范围
.useMilitaryTime() 只影响 TimePicker 自身的显示，不影响 onChange 回调中的值。当切换 12/24 小时制时：
- TimePicker 内部的滚轮会自动切换显示格式
formatTime()方法同步切换格式化输出- 闹钟列表中的时间文字通过
formatTime()同步更新 - 但
AlarmItem中存储的hour始终是 0-23 的原始值
5.4 loop 循环滚动的边界处理
.loop(true) 启用后，TimePicker 的滚轮变成"无限"模式。在闹钟设置场景中，循环滚动带来了更好的用户体验：用户从 00:00 向上滚可以直接到 23:59，而无需反向滚动一大段距离。
如果禁用循环（.loop(false)），滚轮到达边界值（00:00 或 23:59）时会停止，用户需要反向滚动。适合需要强调时间先后顺序的场景（如预约系统中的开始/结束时间选择）。
5.5 @State 数组的不可变更新
ArkTS 的 @State 装饰器通过引用比较来判断数据是否变化。直接修改数组元素不会触发 UI 更新：
// ❌ 错误：直接修改不会被检测到
this.alarms.push(newAlarm);
this.alarms[0].enabled = false;
// ✅ 正确：创建新数组/新对象
this.alarms = this.alarms.concat([newAlarm]);
this.alarms = this.alarms.map(a => a.id === id ?
{ id: a.id, hour: a.hour, minute: a.minute, enabled: !a.enabled, label: a.label } as AlarmItem
: a);
在 TimePicker 的 onChange 回调中，我们也遵循了同样的原则——创建新的 Date 对象而非修改原对象。
5.6 format 参数（已废弃）与 useMilitaryTime 的区别
在 API 10 之前，TimePicker 通过构造函数中的 format 参数控制 12/24 小时制：
// API 10 之前的写法（已废弃，不推荐）
TimePicker({
selected: this.selectedDate,
format: TimePickerFormat.HOUR_MINUTE // 或 HOUR_MINUTE_SECOND
})
// API 11+ 的推荐写法
TimePicker({ selected: this.selectedDate })
.useMilitaryTime(true) // 24 小时制
迁移要点：format 控制显示精度（是否显示秒），useMilitaryTime 仅控制 12/24 小时制。API 11+ 中 TimePicker 默认精确到分钟，如需显示秒需使用 TimePickerFormat.HOUR_MINUTE_SECOND。
六、运行效果
6.1 初始状态
页面顶部显示标题栏"闹钟设置"，下方是组件介绍卡片。紧接着是 TimePicker 展示区，默认选中 07:30（24 小时制），下方显示蓝色大号等宽字体时间预览。然后是"添加闹钟"按钮（蓝色）和"24 小时制"Toggle（开启状态）。下方显示空状态提示"还没有闹钟"。
6.2 选择时间并添加闹钟
滚动 TimePicker 的滚轮，选择想要的小时和分钟。下方的格式化时间预览会实时更新。点击"+ 添加闹钟"按钮，闹钟列表出现，第一条闹钟标签为"起床"，显示选择的时间，Toggle 默认启用。
6.3 多个闹钟管理
连续添加多条闹钟，标签自动循环为"上班"“午休”"运动"等。列表头部显示"X 个已启用"计数。点击某条闹钟的 Toggle 可以将其禁用，禁用的闹钟文字变灰，计数自动减少。点击垃圾桶按钮可以删除该闹钟。
6.4 切换 12 小时制
关闭"24 小时制"Toggle，TimePicker 显示模式切换为 12 小时制（上午/下午 + 1-12 小时），下方的格式化时间预览和闹钟列表中的时间都从 07:30 变为 上午 7:30。切换回 24 小时制后，所有时间恢复 HH:mm 格式。
七、最佳实践与注意事项
7.1 何时使用 TimePicker
- 闹钟/定时器设置：用户需要选择特定的时间点，适合使用 TimePicker 滚轮选择
- 预约/日程安排：选择会议开始时间、预约上门时间等
- 提醒/通知设置：设置每日提醒时间
- 作息设置：睡眠时间、起床时间等
7.2 何时使用自建方案
- 需要秒级精度：TimePicker 默认只显示到分钟，如需秒级精度需使用
TimePickerFormat.HOUR_MINUTE_SECOND - 需要自定义 UI：如时钟表盘式的时间选择、圆弧拖动式等
- 需要时间段选择：如"运行时段 08:00-20:00"，需要两个时间点作为区间
7.3 常见问题
Q: TimePicker 选中后如何获取选中的小时和分钟？
A: 通过 onChange 回调获取 TimePickerResult，其中的 hour（0-23）和 minute（0-59）即为选中的时间值。
Q: 如何在 12 小时制下正确显示时间？
A: TimePickerResult.hour 始终是 0-23 的数值，不会因为显示模式而改变。需要在代码中自己实现转换逻辑：ampm = hour >= 12 ? '下午' : '上午'，h12 = hour % 12 || 12。
Q: TimePicker 可以和 TextClock 配合使用吗？
A: 当然可以。TimePicker 用于选择时间，TextClock 用于显示当前系统时间。在我们的闹钟 Demo 中，可以添加 TextClock 显示实时时间作为对照，让用户看到"现在时间"和"闹钟时间"的对比。
Q: start/end 参数在哪些 API 版本可用？
A: start 和 end 参数从 API 24（HarmonyOS NEXT）开始可用。在 API 23 及之前版本，无法通过组件参数直接限制时间范围，需要自行在 onChange 回调中校验。
7.4 性能建议
- 闹钟列表使用
ForEach渲染，ArkUI 会自动处理增量更新，无需手动优化 - 删除和状态切换操作使用
filter/map创建新数组，时间复杂度 O(n)，对于管理几十条闹钟的规模完全足够 - TimePicker 的
onChange回调在用户滚动时频繁触发，回调中应避免耗时操作（如网络请求、大数据量计算）
八、拓展思考
8.1 闹钟的持久化存储
本 Demo 的闹钟数据存储在 @State 中，App 退出后数据丢失。实际闹钟应用中，需要将闹钟数据持久化到本地。HarmonyOS 提供了多种本地存储方案：
- Preferences：轻量级键值对存储，适合存储简单的闹钟配置
- RelationalStore：关系型数据库，适合大量数据的结构化存储
- BackgroundTaskManager：后台任务管理，用于闹钟到期时触发提醒
8.2 与其他时间组件配合
TimePicker 不是孤立的时间组件。在 ArkUI 中，多个时间相关组件可以协同工作：
- TimePicker + TextClock：选择闹钟时间 + 显示当前时间对照
- TimePicker + TextTimer：选择倒计时目标时间 + 显示剩余时间
- TimePicker + DatePicker：选择完整的日期时间（如预约系统的"2025 年 3 月 15 日 下午 2:30"）
- TimePicker + TextInput：支持手动输入时间 + 滚轮选择两种方式
8.3 实际闹钟应用的表单校验
在真实闹钟应用中，除了本 Demo 的功能外，还需要考虑：
- 重复规则：每天、工作日、周末、自定义（周一/周三/周五）
- 闹钟铃声：从系统铃声库中选择
- 振动模式：是否振动、振动强度
- 贪睡设置：贪睡间隔、最多贪睡次数
- 标签输入：支持用户自定义标签而非固定的预设标签
这些功能的实现可以让 TimePicker Demo 逐步演变成一个完整可用的闹钟应用。
九、总结
本文通过一个闹钟设置的实战 Demo，深入讲解了 HarmonyOS TimePicker 时间选择器组件的核心用法。主要涵盖以下知识点：
- TimePicker 构造函数：
selected参数绑定 Date 对象，TimePicker 只使用其中的小时和分钟 - useMilitaryTime()：控制 12/24 小时制显示，切换时 TimePicker 自动重绘
- loop()：启用循环滚动，提升边界值之间的切换体验
- onChange 回调：参数类型
TimePickerResult，hour始终返回 0-23 的数值 - @State 不可变更新：使用
concat()/filter()/map()创建新数组，显式构造新对象属性 - 时间格式化：根据
useMilitaryTime动态格式化 12h 或 24h 显示字符串
TimePicker 是 ArkUI 时间选择场景的标准解决方案。从闹钟设置到预约系统，从提醒时间到作息管理，TimePicker 以其简洁的 API 和稳定的交互体验，帮助开发者快速实现时间选择功能。希望本文能帮助你在实际项目中高效运用 TimePicker 组件。
相关文章
- 鸿蒙新特性-TextClock文本时钟组件详解 — 显示系统实时时间
- 鸿蒙新特性-TextTimer计时器组件详解 — 倒计时和正计时
- 鸿蒙新特性-DatePicker日期选择器详解 — 日期选择与 DateTimePicker 联动
本文基于 HarmonyOS NEXT API 24 编写，代码经 DevEco Studio 6.1.1 编译验证通过。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
1
0- 0
已为社区贡献151条内容
所有评论(0)