11 Star 5 Fork 9

OpenHarmony-SIG/ohos-PickerView

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 6.08 KB
一键复制 编辑 原始数据 按行查看 历史

PickerView

简介

选择器,包括时间选择、地区选择、分割线设置、文字大小颜色设置

效果展示

显示时间选择器:

时间选择器(农历与阴历的切换):

时间(年月日 时分秒)选择器:

圆形分割器选择器:

城市(省、市)选择器:

自定义选择器:

卡片选择器:

城市(省、市、区)选择器:

下载安装

ohpm install @ohos/pickerview --save

OpenHarmony ohpm环境配置等更多内容,请参考 如何安装OpenHarmony ohpm包

使用说明

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

  1. 初始化:实例化scroller和对应的ShowTimePickerComponent.Model 对象
private scroller: Scroller = new Scroller()
@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();
  1. 属性设置:通过Model类对象设置UI属性来自定义所需风格,也可以添加所需的回调
aboutToAppear() {
   this.showTimeData
       .setDividerLineStroke(2)
       .setDividerLineColor(Color.Black)
       .setFontSize(20)
       .setFontColor(Color.Red)
       .setConfirmButtonFont("确定")
       .setCancelButtonFont("取消")
       .setCancelButtonColor(Color.Red)
       .setConfirmButtonColor(Color.Black)
       .setTitleFontSize(20)
       .setTitleFontColor(Color.Black)
       .setPickerSpace(20)
       .setButtonBackgroundColor("#DCDCDC")
       .setYearRangeStart(2001)
       .setYearRangeEnd(2050)
       .setDefaultSelection([2005, 5, 11])
       .setDividerType(DividerType.CIRCLE)
       .setLineSpacingMultiplier(40)
       .withClick((event: ClickEvent) => {
       this.showTimeData.withText("clicked " + this.count++ + " times");
     });
  1. 界面绘制: 调用对象的构造方法,传递已经实例化的对象。
build() {
   Stack() {
     Scroll(this.scroller) {
       Column() {
         ShowTimePickerComponent({model: this.showTimeData})
      }
     }
   }
 }

接口说明

@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();

  1. 设置分割线宽度 this.showTimeData.setDividerLineStroke(2)
  2. 控制分割线颜色 this.showTimeData.setDividerLineColor(Color.Black)
  3. 控制文字大小 this.showTimeData.setFontSize(20)
  4. 控制文字颜色 this.showTimeData.setFontColor(Color.Red)
  5. 控制确定按钮显示的文字 this.showTimeData.setConfirmButtonFont("确定")
  6. 控制取消按钮显示的文字 this.showTimeData.setCancelButtonFont("取消")
  7. 控制取消按钮的文字颜色 this.showTimeData.setCancelButtonColor(Color.Red)
  8. 控制确定文字颜色 this.showTimeData.setConfirmButtonColor(Color.Black)
  9. 设置标题、确定按钮、取消按钮文字大小 this.showTimeData.setTitleFontSize(20)
  10. 设置标题文字颜色 this.showTimeData.setTitleFontColor(Color.Black)
  11. 设置选择器页面间隔 this.showTimeData.setPickerSpace(20)
  12. 设置按钮背景颜色 this.showTimeData.setButtonBackgroundColor("#7CDCDC")
  13. 时间开始范围 this.showTimeData.setYearRangeStart(2001)
  14. 时间结束范围 this.showTimeData.setYearRangeEnd(2050)
  15. 设置分割线类型 this.showTimeData.setDividerType(DividerType.CIRCLE)
  16. 设置间距 this.showTimeData.setLineSpacingMultiplier(40)

约束与限制

在下述版本验证通过:

  • DevEco Studio 版本: 4.1 Canary(4.1.3.317),SDK:API11 (4.1.0.36)。
  • IDE:DevEco Studio Next ,Developer Beta1(5.0.3.121),SDK:API12 (5.0.0.16)。

目录结构

|---- pickerview 
|     |---- entry  # 示例代码文件夹
|     |---- pickerview  # pickerview库文件夹
|           |---- src
         |----main
            |----ets
               |----components
                  |----common
                     |----AreaDataPickerViewLib.ets #AreaDataParseSample选择器
                     |----CardModel.ets                  #卡片数据生成类
                     |----CardPickerComponent.ets        #卡片选择器
                     |----ChinaDateModel.ets             #时间实体类
                     |----CircleDividerViewLib.ets       #圆形分割器
                     |----CityPickerComponent.ets        #城市选择器
                     |----Constant.ets                   #常量
                     |----CustomizeModel.ets             #自定义实体
                     |----CustomizePickerComponent.ets   #自定义选择器
                     |----HourSecondMinuteComponent.ets  #时分秒选择器
                     |----HourSecondMinuteModel.ets      #时分秒选择器实体
                     |----LunarCalendar.ets              #农历方法
                     |----LunarTimeUtil.ets              #阳历阴历切换
                     |----PickerData.ets                 #选择器分类
                     |----PickerModel.ets                #选择器模型
                     |----Province.ets                   #省、市、区数据
                     |----ShowTimePickerViewLib.ets      #显示时间选择器
                     |----ShowToast.ets                  #提示框
                     |----SolarCalendar.ets              #阳历方法
                     |----TimePickerComponent.ets        #时间选择器
                     |----YearReachSecondComponent.ets   #年到秒时间选择器
|     |---- README.md  # 安装使用方法                    

贡献代码

使用过程中发现任何问题都可以提 Issue 给我们,当然,我们也非常欢迎你给我们发 PR

开源协议

本项目基于 Apache License 2.0 ,请自由地享受和参与开源。

马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/openharmony-sig/ohos-PickerView.git
git@gitee.com:openharmony-sig/ohos-PickerView.git
openharmony-sig
ohos-PickerView
ohos-PickerView
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891