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
2024-12-26 14:38:54
浏览
收藏 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)
  }
}
  • 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.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
分享
微博
QQ
微信
回复
2024-12-26 17:24:57


相关问题
HarmonyOS picker选择器数据源问题
815浏览 • 1回复 待解决
HarmonyOS TextPicker问题
884浏览 • 1回复 待解决
HarmonyOS图片选择器相关问题
1216浏览 • 1回复 待解决
HarmonyOS 图库选择器
775浏览 • 1回复 待解决
lazyforeach替换数据源解决方案
1698浏览 • 1回复 待解决
HarmonyOS 图片选择器怎么实现
814浏览 • 1回复 待解决
HarmonyOS 有状态选择器
685浏览 • 1回复 待解决
HarmonyOS web如何拉起图库选择器
935浏览 • 1回复 待解决
HarmonyOS 日期/日历/时间选择器开发
1600浏览 • 1回复 待解决
HarmonyOS 地区选择器多级列表效果
1151浏览 • 1回复 待解决