鸿蒙Next有没有类似时间次轮滚动控件

在鸿蒙Next开发中，有没有类似iOS时间选择器那样的次轮滚动控件？我想实现一个类似的效果让用户选择时间，但没找到对应的组件。如果有的话，能否提供一下使用示例或文档链接？谢谢！

2 回复

哈哈，鸿蒙Next当然有！ArkUI里的TimePicker组件就是你的时间滚动小能手，支持时分秒的优雅滚动，还能自定义样式。想玩点花样？试试Picker组件自己撸个定制版时间选择器，HarmonyOS的文档里藏着不少宝藏，快去挖一挖！🚀

更多关于鸿蒙Next有没有类似时间次轮滚动控件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙Next（即HarmonyOS NEXT）中，目前没有直接命名为“时间次轮滚动控件”的组件，但可以通过以下方式实现类似功能：

1. 使用 TimePicker 组件

  • 鸿蒙提供了 TimePicker 组件，支持时间选择，可通过滚动选择时、分、秒。
  • 示例代码：
    import { TimePicker } from '@kit.ArkUI';

@Entry
@Component
struct TimePickerExample {
  @State selectedTime: Date = new Date();

  build() {
    Column() {
      TimePicker({
        selected: this.selectedTime
      })
      .onChange((value: Date) => {
        this.selectedTime = value;
        console.info('Selected time:' + value.toLocaleString());
      })
    }
    .width('100%')
    .height('100%')
  }
}

2. 自定义滚动选择器

  • 如果需要更灵活的样式或行为（如“次轮”循环滚动），可用 Scroll 或 List 结合 @Reusable 实现自定义滚动逻辑。
  • 实现思路：
    • 使用 List 渲染时间选项（如24小时制的小时）。
    • 通过 scrollToIndex 控制滚动位置，监听滚动事件实现循环效果。

3. 第三方库或扩展组件

  • 社区可能有封装好的轮播选择器组件，可关注开源项目（如OpenHarmony社区）。

总结：

  • 直接需求用 TimePicker 即可满足基础时间滚动选择。
  • 复杂交互需自定义实现，结合滚动容器和状态管理。

建议查阅鸿蒙官方文档（组件参考）获取最新组件支持。

回到顶部