HarmonyOS picker 如何实现“展示和选中内容不一样”？

Question

HarmonyOS picker 如何实现“展示和选中内容不一样”？

Answer 1

当前textPicker不支持label/value形式：可以获取选择器值的索引，根据索引自行封装映射

下面一个demo可以参考：

interface Fruits { 
  id: number 
  name: string 
} 
 
@Entry 
@Component 
struct TextPickerExample { 
  private select: number = 1 
  private fruitsList: Fruits[] = [ 
    { id: 1, name: "apple1" }, 
    { id: 2, name: "orange2" }, 
    { id: 3, name: "peach3" }, 
    { id: 4, name: "grape4" }, 
  ] 
 
  build() { 
    Column() { 
      TextPicker({ range: this.fruitsList.map((item) => item.name), selected: this.select }) 
        .onChange((value: string | string[], index: number | number[]) => { 
          console.info('Picker item changed, value: ' + value + ', index: ' + index) 
          this.fruitsList[index.toString()].id; 
        }) 
        .disappearTextStyle({ color: Color.Red, font: { size: 15, weight: FontWeight.Lighter } }) 
        .textStyle({ color: Color.Black, font: { size: 20, weight: FontWeight.Normal } }) 
        .selectedTextStyle({ color: Color.Blue, font: { size: 30, weight: FontWeight.Bolder } }) 
    }.width('100%').height('100%') 
  } 
}