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)
}
}
这里该怎么构造成一个三列的选择器,把时间和分钟在选择器中展示出来?
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
HarmonyOS picker选择器的数据源问题
1浏览 • 0回复 待解决
HarmonyOS TextPicker多列问题
36浏览 • 1回复 待解决
HarmonyOS图片选择器相关的问题
498浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
740浏览 • 1回复 待解决
HarmonyOS Photo Picker组件数据源赋值问题咨询
26浏览 • 1回复 待解决
HarmonyOS LazyForEach修改数据源不刷新问题
632浏览 • 1回复 待解决
HarmonyOS 关于文件选择器(FilePicker)使用问题
81浏览 • 1回复 待解决
HarmonyOS TextPickerDialog数据源更新,UI不更新
24浏览 • 1回复 待解决
HarmonyOS IDataSource数据源刷新后,列表为不刷新
375浏览 • 1回复 待解决
HarmonyOS IDataSource支持数据源整体一次替换
667浏览 • 1回复 待解决
HarmonyOS 图片选择器怎么实现
73浏览 • 1回复 待解决
HarmonyOS 解析Json数据添加到数据源不刷新UI
598浏览 • 2回复 待解决
HarmonyOS @ohos.file.picker (选择器) 选择相机和相册权限问题
30浏览 • 1回复 待解决
HarmonyOS 有状态选择器吗
40浏览 • 1回复 待解决
异步回调更新数据源,无法触发列表渲染
2811浏览 • 2回复 待解决
HarmonyOS Swiper使用LazyForEach,在数据源更新后,页面闪烁
1浏览 • 0回复 待解决
Foreach循环渲染,数据源改变时的重复渲染
1044浏览 • 1回复 待解决
关于使用foreach&lazyforeach更改数据源界面不刷新的问题
1185浏览 • 2回复 待解决
HarmonyOS LazyForEach无法检测数据源的变化进行重新渲染
25浏览 • 1回复 待解决
TimePicker如何设置时间选择器的范围?
7023浏览 • 1回复 待解决
HarmonyOS web如何拉起图库选择器
32浏览 • 1回复 待解决
HarmonyOS 日期/日历/时间选择器开发
544浏览 • 1回复 待解决
HarmonyOS 地区选择器多级列表效果
417浏览 • 1回复 待解决
HarmonyOS 文件选择器,设置最大选择数,没效果
29浏览 • 1回复 待解决
HarmonyOS 时间选择器不支持选择到秒吗?
41浏览 • 1回复 待解决
range可以是个二维数组。参考demo: