ts-basic-components-textpicker.md 1.8 KB
Newer Older
Z
zengyawen 已提交
1 2
# TextPicker

T
explain  
tianyu 已提交
3 4
滚动选择文本的组件。

H
geshi  
HelloCrease 已提交
5
>  **说明:**
Z
zengyawen 已提交
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
> 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。


## 权限列表




## 子组件




## 接口

21
TextPicker(value: {range: string[] | Resource, value?: string, selected?: number})
Z
zengyawen 已提交
22 23 24 25

根据range指定的选择范围创建文本选择器。

- 参数
T
explain  
tianyu 已提交
26
  | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
Z
zengyawen 已提交
27
  | -------- | -------- | -------- | -------- | -------- |
28
  | range | string[] \| [Resource](../../ui/ts-types.md#resource类型) | 是 | - | 选择器的数据选择范围。 |
29
  | value       | string           | 否    | -    | 搜索文本值。                                   | 
Z
zengyawen 已提交
30 31 32 33 34
  | selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 | 


## 属性

T
explain  
tianyu 已提交
35
| 名称 | 参数类型 | 默认值 | 描述 |
Z
zengyawen 已提交
36
| -------- | -------- | -------- | -------- |
T
explain  
tianyu 已提交
37
| defaultPickerItemHeight | Length | - | 默认Picker内容项元素高度。 |
Z
zengyawen 已提交
38 39 40 41


## 事件

T
explain  
tianyu 已提交
42
| 名称 | 描述 |
43
| -------- | -------- |
T
explain  
tianyu 已提交
44
| onChange(callback:&nbsp;(value:&nbsp;string,&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 滑动选中TextPicker文本内容后,触发该回调。<br/>-&nbsp;value:&nbsp;当前选中项的文本。<br/>-&nbsp;index:&nbsp;当前选中项的下标。 |
Z
zengyawen 已提交
45 46 47 48


## 示例

H
geshi  
HelloCrease 已提交
49 50
```ts
// xxx.ets
Z
zengyawen 已提交
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
@Entry
@Component
struct TextPickerExample {
  private select: number = 1
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']

  build() {
    Column() {
      TextPicker({range: this.fruits, selected: this.select})
        .onChange((value: string, index: number) => {
          console.info('Picker item changed, value: ' + value + ', index: ' + index)
        })
    }
  }
}
```

![zh-cn_image_0000001219662657](figures/zh-cn_image_0000001219662657.png)