一、问题概括
希望将数据以滚动选择器的方式呈现，要怎么设计数据结构？有哪些要考虑到的方面？
根据上面两个大的疑问点，我们可以进行以下的思路分析：
（一）切入点：必须用到的数据结构——JSON
综合来看，对于部署到服务器中能正常运行的项目来说，基本逃不出几种常用的数据传输格式，在这些格式中，JSON又是最常用的一种。前端从远程接口向后端服务器获取数据的过程中，每一次请求数据，我们都要处理以JSON形式接收到的数据。
所以，我们必须以JSON格式的数据为切入点进行研究。
（二）简化问题
JSON是一种较为这种复杂的数据结构，当层次多时便不易理解。这里我们把JSON数据进行拆分，从而得到较易理解的小模块，从具体问题入手，在实操过程中来理解。
接下来，来看官网给出的TextPicker文本选择器的案例。
二、案例分析
以官网的案例为例，这里只选择了单列和多列两种情况的数据。这里只涉及写死的具有固定元素的字符串列表，暂不涉及更为复杂的不限元素数量的案例（如省市区的选择案例）。
三、TextPicker——API用法分析
关于TextPicker的详细用法，参见官网文档：docs.openharmony.cn/pages/v4.1/…
这里给出概要说明
TextPicker是从API 8 开始支持的功能，语法如下：
TextPicker(options?:TextPickerOptions)
作用：根据range指定的选择范围创建文本选择器
参数：
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| options | TextPickerOptions | 否 | 配置文本选择器的参数。 |
TextPickerOptions对象说明
这里是TextPicker要用上的参数，长话短说，一共三种：
（1）range ：string[] 字符串数组类型【必填】
选择器的数据选择列表。不可设置为空数组（设空则不显示）。
（2）selected：number 数字类型 （选填）
设置默认选中项在数组中的索引值。默认值：0
（3）value：string 字符串类型
设置默认选中项的值。默认值：第一个元素值
下图案例：只向上推动了两处，单选择器和多选择器都将apple数据往上推一格。根据console反馈的因此产生的日志信息，我们进行分析。
从下图中可知，正常情况下，文本选择器是会按range给出的字符串列表从索引为0开始，作为显示在最上方的元素。而如果设置了selected参数，传入一个number类型的数据，就可以选择index=number的位置上的字符串，使其显示在最上方。（见①、②）
而value和index显然是一一对应的。这里要指出，作为多选择器案例，其value是多个选择器指定选中的元素的组合而成的字符串列表。而这个字符串列表对应的index则是由number组成的number[]数组。
③的作用是将特定索引的值放在最上
四、官网案例源码
// xxx.ets
class bottom {
bottom:number = 50
}
let bott:bottom = new bottom()
@Entry
@Component
struct TextPickerExample {
private select: number = 1
private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4']
private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4']
private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4']
private multi: string[][] = [this.apfruits, this.orfruits, this.pefruits]
build() {
Column() {
TextPicker({ range: this.apfruits, selected: this.select })
.onChange((value: string | string[], index: number | number[]) => {
console.info('Picker item changed, value: ' + value + ', index: ' + index)
}).margin(bott)
TextPicker({ range: this.multi })
.onChange((value: string | string[], index: number | number[]) => {
console.info('TextPicker 多列:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))
}).margin(bott)
}
}
}
五、实操案例——以服药数量为例
实现效果
class bottom {
bottom:number = 50
}
let bott:bottom = new bottom()
@Entry
@Component
struct TextPickerExample {
private select: number = 1
// 使用量
private amount: string[] = ['0.5', '1', '2', '3','4','5','6','7','8','9']
// 单位
private measurement: string[] = ['颗', '粒', '片', '包', '杯','枝','瓶']
private multi: string[][] = [this.amount, this.measurement]
build() {
Column() {
TextPicker({ range: this.amount, selected: this.select })
.onChange((value: string | string[], index: number | number[]) => {
console.info('Picker item changed, value: ' + value + ', index: ' + index)
}).margin(bott)
TextPicker({ range: this.multi })
.onChange((value: string | string[], index: number | number[]) => {
console.info('TextPicker 多列:onChange ' + JSON.stringify(value) + ', ' + 'index: ' + JSON.stringify(index))
}).margin(bott)
}
}
}
