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

E
ester.zhou 已提交
3
The **\<TextPicker>** component allows users to scroll to select text.
Z
zengyawen 已提交
4

E
ester.zhou 已提交
5
>  **NOTE**
6
>
E
ester.zhou 已提交
7
>  This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
Z
zengyawen 已提交
8 9


E
esterzhou 已提交
10
## Child Components
Z
zengyawen 已提交
11

12
Not supported
Z
zengyawen 已提交
13 14 15 16


## APIs

E
ester.zhou 已提交
17
TextPicker(options?: {range: string[]|Resource|TextPickerRangeContent[], selected?: number, value?: string})
Z
zengyawen 已提交
18 19 20

Creates a text picker based on the selection range specified by **range**.

E
ester.zhou 已提交
21
**Parameters**
Z
zengyawen 已提交
22

E
ester.zhou 已提交
23 24
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
E
ester.zhou 已提交
25
| range | string[] \| [Resource](ts-types.md#resource)\|[TextPickerRangeContent](#textpickerrangecontent10)[]<sup>10+</sup> | Yes| Data selection range of the picker. This parameter cannot be set to an empty array. If set to an empty array, it will not be displayed. If it is dynamically changed to an empty array, the current value remains displayed.|
E
ester.zhou 已提交
26
| selected | number | No| Index of the default item in the range.<br>Default value: **0**|
E
ester.zhou 已提交
27 28 29 30 31 32 33 34
| value | string | No| Value of the default item in the range. The priority of this parameter is lower than that of **selected**.<br>Default value: value of the first item<br>**NOTE**\<br>This parameter works only for a text list. It does not work for an image list or a list consisting of text and images.|

## TextPickerRangeContent<sup>10+</sup>

| Name| Type                                                | Mandatory| Description  |
| ------ | -------------------------------------------------------- | ---- | ---------- |
| icon   | string \| [Resource](ts-types.md#resource) | Yes  | Image resource.|
| text   | string \| [Resource](ts-types.md#resource) | No  | Text information.|
Z
zengyawen 已提交
35 36 37

## Attributes

E
ester.zhou 已提交
38 39
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.

E
ester.zhou 已提交
40 41
| Name| Type| Description|
| -------- | -------- | -------- |
E
ester.zhou 已提交
42
| defaultPickerItemHeight | number \| string | Height of each item in the picker.|
E
ester.zhou 已提交
43 44 45
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width for the top and bottom items.|
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of all items except the top, bottom, and selected items.|
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10) | Font color, font size, and font width of the selected item.|
Z
zengyawen 已提交
46 47 48

## Events

E
ester.zhou 已提交
49 50
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.

E
ester.zhou 已提交
51
| Name| Description|
E
esterzhou 已提交
52
| -------- | -------- |
E
ester.zhou 已提交
53
| onChange(callback: (value: string, index: number) =&gt; void) | Triggered when an item in the picker is selected.<br>- **value**: value of the selected item.<br>**NOTE**<br>For a text list or a list consisting of text and images, **value** indicates the text value of the selected item. For an image list, **value** is empty.<br>- **index**: index of the selected item. |
Z
zengyawen 已提交
54 55 56 57


## Example

58 59
```ts
// xxx.ets
Z
zengyawen 已提交
60 61 62 63 64 65 66 67
@Entry
@Component
struct TextPickerExample {
  private select: number = 1
  private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']

  build() {
    Column() {
E
ester.zhou 已提交
68
      TextPicker({ range: this.fruits, selected: this.select })
Z
zengyawen 已提交
69 70 71 72 73 74 75 76 77
        .onChange((value: string, index: number) => {
          console.info('Picker item changed, value: ' + value + ', index: ' + index)
        })
    }
  }
}
```

![en-us_image_0000001257058417](figures/en-us_image_0000001257058417.png)