HarmonyOS TextPicker多列选择器数据源的构造问题
class DayModel{
dayname: string = '';
daydate: string = '';
dayinfo: HourModel[] = [];
}
class HourModel{
hourname: string = '';
hourinfo: MinuteModel[] = [];
}
class MinuteModel{
timename: string = '';
time: string = '';
}
@Entry
@Component
export default struct TimePickerView {
close?: ()=>void;
@State timeList: DayModel[] = [];
@State seletedIndexs: number[] = [];
aboutToAppear() {
let jsonString: string = '[{"dayname":"今天","daydate":"2024-06-28","dayinfo":[{"hourname":"13点","hourinfo":[{"timename":"30-59","time":"2024-06-28T13:30:00"}]},{"hourname":"14点","hourinfo":[{"timename":"00-30","time":"2024-06-28T14:00:00"},{"timename":"30-59","time":"2024-06-28T14:30:00"}]},{"hourname":"15点","hourinfo":[{"timename":"00-30","time":"2024-06-28T15:00:00"},{"timename":"30-59","time":"2024-06-28T15:30:00"}]},{"hourname":"16点","hourinfo":[{"timename":"00-30","time":"2024-06-28T16:00:00"},{"timename":"30-59","time":"2024-06-28T16:30:00"}]},{"hourname":"17点","hourinfo":[{"timename":"00-30","time":"2024-06-28T17:00:00"},{"timename":"30-59","time":"2024-06-28T17:30:00"}]},{"hourname":"18点","hourinfo":[{"timename":"00-30","time":"2024-06-28T18:00:00"},{"timename":"30-59","time":"2024-06-28T18:30:00"}]},{"hourname":"19点","hourinfo":[{"timename":"00-30","time":"2024-06-28T19:00:00"}]}]},{"dayname":"明天","daydate":"2024-06-29","dayinfo":[{"hourname":"8点","hourinfo":[{"timename":"30-59","time":"2024-06-29T08:30:00"}]},{"hourname":"9点","hourinfo":[{"timename":"00-30","time":"2024-06-29T09:00:00"},{"timename":"30-59","time":"2024-06-29T09:30:00"}]},{"hourname":"10点","hourinfo":[{"timename":"00-30","time":"2024-06-29T10:00:00"},{"timename":"30-59","time":"2024-06-29T10:30:00"}]},{"hourname":"11点","hourinfo":[{"timename":"00-30","time":"2024-06-29T11:00:00"},{"timename":"30-59","time":"2024-06-29T11:30:00"}]},{"hourname":"12点","hourinfo":[{"timename":"00-30","time":"2024-06-29T12:00:00"},{"timename":"30-59","time":"2024-06-29T12:30:00"}]},{"hourname":"13点","hourinfo":[{"timename":"00-30","time":"2024-06-29T13:00:00"},{"timename":"30-59","time":"2024-06-29T13:30:00"}]},{"hourname":"14点","hourinfo":[{"timename":"00-30","time":"2024-06-29T14:00:00"},{"timename":"30-59","time":"2024-06-29T14:30:00"}]},{"hourname":"15点","hourinfo":[{"timename":"00-30","time":"2024-06-29T15:00:00"},{"timename":"30-59","time":"2024-06-29T15:30:00"}]},{"hourname":"16点","hourinfo":[{"timename":"00-30","time":"2024-06-29T16:00:00"},{"timename":"30-59","time":"2024-06-29T16:30:00"}]},{"hourname":"17点","hourinfo":[{"timename":"00-30","time":"2024-06-29T17:00:00"},{"timename":"30-59","time":"2024-06-29T17:30:00"}]},{"hourname":"18点","hourinfo":[{"timename":"00-30","time":"2024-06-29T18:00:00"},{"timename":"30-59","time":"2024-06-29T18:30:00"}]},{"hourname":"19点","hourinfo":[{"timename":"00-30","time":"2024-06-29T19:00:00"}]}]},{"dayname":"后天","daydate":"2024-06-30","dayinfo":[{"hourname":"8点","hourinfo":[{"timename":"30-59","time":"2024-06-30T08:30:00"}]},{"hourname":"9点","hourinfo":[{"timename":"00-30","time":"2024-06-30T09:00:00"},{"timename":"30-59","time":"2024-06-30T09:30:00"}]},{"hourname":"10点","hourinfo":[{"timename":"00-30","time":"2024-06-30T10:00:00"},{"timename":"30-59","time":"2024-06-30T10:30:00"}]},{"hourname":"11点","hourinfo":[{"timename":"00-30","time":"2024-06-30T11:00:00"},{"timename":"30-59","time":"2024-06-30T11:30:00"}]},{"hourname":"12点","hourinfo":[{"timename":"00-30","time":"2024-06-30T12:00:00"},{"timename":"30-59","time":"2024-06-30T12:30:00"}]},{"hourname":"13点","hourinfo":[{"timename":"00-30","time":"2024-06-30T13:00:00"},{"timename":"30-59","time":"2024-06-30T13:30:00"}]},{"hourname":"14点","hourinfo":[{"timename":"00-30","time":"2024-06-30T14:00:00"},{"timename":"30-59","time":"2024-06-30T14:30:00"}]},{"hourname":"15点","hourinfo":[{"timename":"00-30","time":"2024-06-30T15:00:00"},{"timename":"30-59","time":"2024-06-30T15:30:00"}]},{"hourname":"16点","hourinfo":[{"timename":"00-30","time":"2024-06-30T16:00:00"},{"timename":"30-59","time":"2024-06-30T16:30:00"}]},{"hourname":"17点","hourinfo":[{"timename":"00-30","time":"2024-06-30T17:00:00"},{"timename":"30-59","time":"2024-06-30T17:30:00"}]},{"hourname":"18点","hourinfo":[{"timename":"00-30","time":"2024-06-30T18:00:00"},{"timename":"30-59","time":"2024-06-30T18:30:00"}]},{"hourname":"19点","hourinfo":[{"timename":"00-30","time":"2024-06-30T19:00:00"}]}]}]'
this.timeList = JSON.parse(jsonString);
}
build(){
Column(){
Blank().layoutWeight(1)
this.titleView();
TextPicker({range:this.timeList.map(item => `${item.dayname}`/*我这里该怎么构造成一个三列的选择器,把时间和分钟在选择器中展示出来*/), selected:this.seletedIndexs}).width('100%').layoutWeight(1)
.onChange((value: string | string[], index: number | number[]) => {
this.seletedIndexs = index as number[];
console.info('Picker item changed, value: ' + value + ', index: ' + index)
})
.canLoop(false)
}
}
@Builder titleView(){
Row(){
Text('取消').padding(16).onClick(this.close)
Text('请选择预约时间')
Text('完成').padding(16).onClick(()=>{
if (this.close !== undefined) {
this.close();
}
})
}.width('100%').justifyContent(FlexAlign.SpaceBetween)
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
这里该怎么构造成一个三列的选择器,把时间和分钟在选择器中展示出来?
HarmonyOS
赞
收藏 0
回答 1
相关问题
HarmonyOS picker选择器的数据源问题
815浏览 • 1回复 待解决
HarmonyOS TextPicker多列问题
884浏览 • 1回复 待解决
HarmonyOS图片选择器相关的问题
1216浏览 • 1回复 待解决
HarmonyOS Photo Picker组件数据源赋值问题咨询
821浏览 • 1回复 待解决
HarmonyOS LazyForEach修改数据源不刷新问题
1681浏览 • 1回复 待解决
HarmonyOS 图库选择器
775浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
1698浏览 • 1回复 待解决
HarmonyOS 关于文件选择器(FilePicker)使用问题
816浏览 • 1回复 待解决
HarmonyOS ForEach数据源属性修改,页面不刷新
793浏览 • 1回复 待解决
HarmonyOS TextPickerDialog数据源更新,UI不更新
889浏览 • 1回复 待解决
HarmonyOS IDataSource支持数据源整体一次替换
1610浏览 • 1回复 待解决
HarmonyOS IDataSource数据源刷新后,列表为不刷新
1279浏览 • 1回复 待解决
HarmonyOS 解析Json数据添加到数据源不刷新UI
1497浏览 • 2回复 待解决
HarmonyOS 图片选择器怎么实现
814浏览 • 1回复 待解决
HarmonyOS @ohos.file.picker (选择器) 选择相机和相册权限问题
813浏览 • 1回复 待解决
HarmonyOS 有状态选择器吗
685浏览 • 1回复 待解决
关于使用foreach&lazyforeach更改数据源界面不刷新的问题
2030浏览 • 2回复 待解决
HarmonyOS Swiper使用LazyForEach,在数据源更新后,页面闪烁
1135浏览 • 1回复 待解决
HarmonyOS 是否有只选择年月的日期选择器组件
751浏览 • 1回复 待解决
Foreach循环渲染,数据源改变时的重复渲染
1928浏览 • 1回复 待解决
HarmonyOS LazyForEach无法检测数据源的变化进行重新渲染
858浏览 • 1回复 待解决
异步回调更新数据源,无法触发列表渲染
3801浏览 • 2回复 待解决
HarmonyOS web如何拉起图库选择器
935浏览 • 1回复 待解决
HarmonyOS 日期/日历/时间选择器开发
1600浏览 • 1回复 待解决
HarmonyOS 地区选择器多级列表效果
1151浏览 • 1回复 待解决
range可以是个二维数组。参考demo: