鸿蒙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. 自定义滚动选择器

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

3. 第三方库或扩展组件

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

总结:

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

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

回到顶部