【OpenHarmony】鸿蒙 UI开发之WheelPicker

简介

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

下载安装

安装命令如下：

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()

设置空气感 model.setAtmospheric()
设置对齐方式 model.setItemAlign()
设置滚轮列表数据 model.setData()
是否设置幕布 model.setCurtain()
设置幕布颜色 model.setCurtainColor()
是否设置循环 model.setCyclic()
设置字体 model.setFontFamily()
是否设置指示器 model.setIndicator()
设置指示器颜色 model.setIndicatorColor()
设置指示器大小 model.setIndicatorSize()
设置列表数据的间隙 model.setItemSpace()
设置数据的颜色 model.setItemTextColor()
设置数据的大小 model.setItemTextSize()
设置选中的数据颜色 model.setSelectedItemTextColor()
设置数据的高度 model.setTextHeight()
设置选中的位置 model.setSelectedItemPosition()
设置可见的个数 model.setVisibleItemCount()
获得数据的高度 model.getTextHeight()
获得选中的数据颜色 model.getSelectedItemTextColor()
获得数据的大小 model.getItemTextSize()
获得数据的颜色 model.getItemTextColor()
获得行间隙 model.getItemSpace()
获得滚轮行的高度 model.getItemHeight()
获得数据的对齐方式 model.getItemAlign()
获得指示器大小 model.getIndicatorSize()
获得指示器颜色 model.getIndicatorColor()
获得字体设置 model.getFontFamily()
获得当前的位置 model.getCurrentItemPosition()
获得当前的数据 model.getCurrentItemData()
获得幕布颜色 model.getCurtainColor()
获得可见的个数 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  # 安装使用方法

【OpenHarmony】 鸿蒙 UI开发之WheelPicker

简介