代码拉取完成,页面将自动刷新
选择器,包括时间选择、地区选择、分割线设置、文字大小颜色设置
显示时间选择器:
时间选择器(农历与阴历的切换):
时间(年月日 时分秒)选择器:
圆形分割器选择器:
城市(省、市)选择器:
自定义选择器:
卡片选择器:
城市(省、市、区)选择器:
ohpm install @ohos/pickerview --save
OpenHarmony ohpm环境配置等更多内容,请参考 如何安装OpenHarmony ohpm包 。
提供多种类型选择器,使用方法类似,以显示时间选择器为例
private scroller: Scroller = new Scroller()
@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();
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");
});
build() {
Stack() {
Scroll(this.scroller) {
Column() {
ShowTimePickerComponent({model: this.showTimeData})
}
}
}
}
@State showTimeData: ShowTimePickerComponent.Model = new ShowTimePickerComponent.Model();
在下述版本验证通过:
|---- 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 ,请自由地享受和参与开源。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。