• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# TextPicker
2
3滑动选择文本内容的组件。
4
5>  **说明:**
6>
7>  该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
8
9
10## 子组件
11
1213
14
15## 接口
16
17TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string})
18
19根据range指定的选择范围创建文本选择器。
20
21**参数:**
22
23| 参数名 | 参数类型 | 必填 | 参数描述 |
24| -------- | -------- | -------- | -------- |
25| range | string[] \| [Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择列表。不可设置为空数组,若设置为空数组,则不显示;若动态变化为空数组,则保持当前正常值显示。 |
26| selected | number | 否 | 设置默认选中项在数组中的索引值。<br/>默认值:0 |
27| value | string | 否 | 设置默认选中项的值,优先级低于selected。<br/>默认值:第一个元素值 |
28
29## 属性
30
31除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
32
33| 名称 | 参数类型 | 描述 |
34| -------- | -------- | -------- |
35| defaultPickerItemHeight | number \| string | 设置Picker各选择项的高度。 |
36
37## 事件
38
39除支持[通用事件](ts-universal-events-click.md)外,还支持以下事件:
40
41| 名称 | 描述 |
42| -------- | -------- |
43| onAccept(callback: (value: string, index: number) => void) | 点击弹窗中的“确定”按钮时触发该回调。<br/><br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的索引值。<br/>**说明:** <br/>该事件仅在[文本滑动选择器弹窗](ts-methods-textpicker-dialog.md)中生效。 |
44| onCancel(callback: () => void) | 点击弹窗中的“取消”按钮时触发该回调。<br/>**说明:** <br/>该事件仅在[文本滑动选择器弹窗](ts-methods-textpicker-dialog.md)中生效。 |
45| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后,触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>**说明**:当显示文本或图片加文本列表时,value值为选中项中的文本值,当显示图片列表时,value值为空。<br/>-&nbsp;index:&nbsp;当前选中项的索引值。 |
46
47
48## 示例
49
50```ts
51// xxx.ets
52@Entry
53@Component
54struct TextPickerExample {
55  private select: number = 1
56  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
57
58  build() {
59    Column() {
60      TextPicker({ range: this.fruits, selected: this.select })
61        .onChange((value: string, index: number) => {
62          console.info('Picker item changed, value: ' + value + ', index: ' + index)
63        })
64    }
65  }
66}
67```
68
69![zh-cn_image_0000001219662657](figures/zh-cn_image_0000001219662657.png)
70