HarmonyOS TextPicker 实现省市区联动问题?

TextPicker 实现省市区联动问题 3列数据变成2列的时候有问题,2列时第3列数据不会变

demo:

@Entry
@Component
struct Index {
  @State data: TextCascadePickerRangeContent[] = []
  @State selected: number | number[] = []

  aboutToAppear(): void {
    this.data = [
      {
        text: '北京',
        children: [{
          text: '朝阳区',
          children:[
            {text: ''}
          ]
        }, {
          text: '海淀区',
          children:[
            {text: ''}
          ]
        }, {
          text: '丰台区',
          children:[
            {text: ''}
          ]
        }, {
          text: '昌平区',
          children:[
            {text: ''}
          ]
        }, {
          text: '通州区',
          children:[
            {text: ''}
          ]
        }]
      },
      {
        text: '广东',
        children: [{
          text: '广州',
          children: [{
            text: '萝岗区'
          }, {
            text: '荔湾区'
          }, {
            text: '越秀区'
          }, {
            text: '海珠区'
          }]
        }, {
          text: '广州',
          children: [{
            text: '福田区'
          }, {
            text: '南山区'
          }, {
            text: '宝安区'
          }, {
            text: '龙岗区'
          }]
        }, {
          text: '佛山',
          children: [{
            text: '市辖区'
          }, {
            text: '禅城区'
          }, {
            text: '南海区'
          }, {
            text: '顺德区'
          }]
        }]
      }
    ]
    this.selected = [1,0,0]
  }

  @Builder
  buildTextPicker() {
    TextPicker({
      range: this.data,
      selected: this.selected
    })
      .divider({
        strokeWidth: 1,
        startMargin: 0,
        endMargin: 0,
        color: '#1A000000'
      })
      .flexGrow(1)
      .textStyle({
        color: '#4C000000',
        font: {
          size: 15,
          weight: FontWeight.Regular
        }
      })
      .selectedTextStyle({
        color: '#FF26273C',
        font: {
          size: 18,
          weight: FontWeight.Regular
        }
      })
      .canLoop(false)
      .onChange((value, index) => {
        this.selected = index
      })
  }

  build() {
    Column({space: 12}) {
      this.buildTextPicker()
      Button('选择中1')
        .fontSize(15)
        .width(200)
        .height(44)
        .onClick(() => {
          this.selected = [1,0,0]
        })
      Button('选择中2')
        .fontSize(15)
        .width(200)
        .height(44)
        .onClick(() => {
          this.selected = [0,0,0]
        })
    }
    .width('100%')
    .height("100%")
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
  }
}
阅读 428
1 个回答

TextPicker的数据列表range的类型及列数不可以动态修改。因此,无法实现三列数据转换成两列数据。使用索引进行跳转时,若第三列数据为空,则不进行变动

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进