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
16h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

range可以是个二维数组。参考demo:

import { plainToClass, ClassConstructor } from 'class-transformer'
import "reflect-metadata"
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 TextPickerTest {
  close?: ()=>void;
  @State timeList: DayModel[] = [];
  @State seletedIndexs: number[] = [];
  @State DayList: string[] = [];
  @State MinList: string[] = [];
  @State SecList: HourModel[] = [];
  @State SecList1: string[] = [];
  private multi: string[][] = [this.DayList,this.MinList,this.SecList1]
  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)
    for (let i = 0; i < this.timeList.length; i++) {
      this.DayList[i] = this.timeList[i].dayname
      this.MinList[i] = this.timeList[i].daydate
      this.SecList = this.SecList.concat(this.timeList[i].dayinfo)
    }
    for (let i = 0; i < this.SecList.length; i++) {
      this.SecList1[i] = this.SecList[i].hourname
    }
    console.log("DayList:"+JSON.stringify(this.DayList))
    console.log("MinList:"+JSON.stringify(this.MinList))
    console.log("SecList1:"+JSON.stringify(this.SecList1))
  }
  build(){
    Column(){
      /*Blank().layoutWeight(1)
      this.titleView();*/
      TextPicker({ range: this.multi })
        .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)
  }
}
分享
微博
QQ
微信
回复
14h前
相关问题
HarmonyOS picker选择器数据源问题
1浏览 • 0回复 待解决
HarmonyOS TextPicker问题
36浏览 • 1回复 待解决
HarmonyOS图片选择器相关问题
498浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
740浏览 • 1回复 待解决
HarmonyOS 图片选择器怎么实现
73浏览 • 1回复 待解决
HarmonyOS 有状态选择器
40浏览 • 1回复 待解决
TimePicker如何设置时间选择器范围?
7023浏览 • 1回复 待解决
HarmonyOS web如何拉起图库选择器
32浏览 • 1回复 待解决
HarmonyOS 日期/日历/时间选择器开发
544浏览 • 1回复 待解决
HarmonyOS 地区选择器多级列表效果
417浏览 • 1回复 待解决