【OpenHarmony】 鸿蒙 UI开发之WheelPicker

简介

WheelPicker可以实现滚轮选择,通过设置可以实现多种效果,也可以设置属性,改变UI效果,如时间选择器,地区选择器的三级联动,实现需求效果。

下载安装

  1. 安装命令如下:
bash 复制代码
ohpm install @ohos/wheelpicker

使用说明

提供多种类型选择器,使用方法类似,以显示时间选择器为例

1、初始化:实例化ShowTimePickerComponent.Model 对象

less 复制代码
@State showWheelPickerLeft: WheelPicker.Model= new WheelPicker.Model()

2、属性设置:通过Model类对象设置UI属性来自定义所需风格,也可以添加所需的回调

typescript 复制代码
private aboutToAppear() {
   this.showWheelPickerLeft
     .setItemAlign(HorizontalAlign.End)
     .setData(this.array)
     .setSelectDataShow((text: string) => {
       prompt.showToast({
         message: "Left:" + text
       });
     })
     }

3、界面绘制: 调用对象的构造方法,传递已经实例化的对象。

scss 复制代码
 build() {
   Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
     Button("go to:" + this.randomSelect)
       .height(50)
       .padding(10)
       .onClick(() => {
         this.showWheelPickerMiddle.setSelectedItemPosition(this.randomNumber)
         this.randomNumber = Math.floor(Math.random() * (this.array.length + 1))
         this.randomSelect = this.array[this.randomNumber]
       })
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
       Row() {
         WheelDatePicker()
       }
     }.width('100%').height('100%')
   }
 }

DD一下: 鸿蒙开发各类文档,可关注公众号<程序猿百晓生>获取。

erlang 复制代码
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

接口说明

showWheelPicker: WheelPicker.Model= new WheelPicker.Model()

  1. 设置空气感 model.setAtmospheric()
  2. 设置对齐方式 model.setItemAlign()
  3. 设置滚轮列表数据 model.setData()
  4. 是否设置幕布 model.setCurtain()
  5. 设置幕布颜色 model.setCurtainColor()
  6. 是否设置循环 model.setCyclic()
  7. 设置字体 model.setFontFamily()
  8. 是否设置指示器 model.setIndicator()
  9. 设置指示器颜色 model.setIndicatorColor()
  10. 设置指示器大小 model.setIndicatorSize()
  11. 设置列表数据的间隙 model.setItemSpace()
  12. 设置数据的颜色 model.setItemTextColor()
  13. 设置数据的大小 model.setItemTextSize()
  14. 设置选中的数据颜色 model.setSelectedItemTextColor()
  15. 设置数据的高度 model.setTextHeight()
  16. 设置选中的位置 model.setSelectedItemPosition()
  17. 设置可见的个数 model.setVisibleItemCount()
  18. 获得数据的高度 model.getTextHeight()
  19. 获得选中的数据颜色 model.getSelectedItemTextColor()
  20. 获得数据的大小 model.getItemTextSize()
  21. 获得数据的颜色 model.getItemTextColor()
  22. 获得行间隙 model.getItemSpace()
  23. 获得滚轮行的高度 model.getItemHeight()
  24. 获得数据的对齐方式 model.getItemAlign()
  25. 获得指示器大小 model.getIndicatorSize()
  26. 获得指示器颜色 model.getIndicatorColor()
  27. 获得字体设置 model.getFontFamily()
  28. 获得当前的位置 model.getCurrentItemPosition()
  29. 获得当前的数据 model.getCurrentItemData()
  30. 获得幕布颜色 model.getCurtainColor()
  31. 获得可见的个数 model.getVisibleItemCount()

约束与限制

在下述版本验证通过:

  • DevEco Studio 版本: NEXT Developer Beta3-5.0.3.530

  • OpenHarmony SDK:API12 (5.0.0.35)

目录结构

lua 复制代码
|---- WheelPicker  
|     |---- entry  # 示例代码文件夹
|     |---- library  # WheelPicker库文件夹
|	    |----src
          |----main
              |----ets
                  |----components
                      |----wheelpicker.ets #滚轮选择的核心实现
|           |---- index.ets  # 对外接口
|     |---- README.md  # 安装使用方法      
|     |---- README_zh.md  # 安装使用方法                
相关推荐
Jalor7 分钟前
Flutter + 鸿蒙 | Flutter 跳转鸿蒙原生界面
flutter·harmonyos
zhanshuo1 小时前
开发者必看!如何在HarmonyOS中快速调用摄像头功能
harmonyos
HMSCore1 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
zhanshuo1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
HarmonyOS小助手2 小时前
闯入鸿蒙:浪漫、理想与「草台班子」
harmonyos·鸿蒙·harmonyos next·鸿蒙生态
xq95272 小时前
flutter 鸿蒙化插件开发横空出世
harmonyos
HarmonyOS_SDK2 小时前
借助HarmonyOS SDK,《NBA巅峰对决》实现“分钟级启动”到“秒级进场”
harmonyos
别说我什么都不会2 小时前
【OpenHarmony】鸿蒙开发之Jmustache
harmonyos
塞尔维亚大汉3 小时前
鸿蒙内核源码分析(文件系统篇) | 用图书管理说文件系统
源码·harmonyos
塞尔维亚大汉6 小时前
鸿蒙内核源码分析(忍者ninja篇) | 都忍者了能不快吗
源码·harmonyos