# 文本滑动选择器弹窗
说明: 该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
根据指定的选择范围创建文本选择器,展示在弹窗上。
# 权限列表
无
# TextPickerDialog.show
show(options: TextPickerDialogOptions)
定义文本滑动选择器弹窗并弹出。
TextPickerDialogOptions参数
参数名 参数类型 必填 默认值 参数描述 range string[] 是 - 选择器的数据选择范围。 selected number 否 0 选中项在数组中的index值。 value string 否 第一个元素值 选中项的值,优先级低于selected。 defaultPickerItemHeight number | string 否 - 默认Picker内容项元素高度。 onAccept (value: TextPickerResult) => void 否 - 点击弹窗中确定按钮时触发。 onCancel () => void 否 - 点击弹窗中取消按钮时触发。 onChange (value: TextPickerResult) => void 否 - 滑动选择器,当前选择项改变时触发。 TextPickerResult对象说明
名称 参数类型 描述 value string 选中项文本。 index number 选中项在数组中的index值。
# 示例
// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
@State select: number = 1
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }) {
Button("TextPickerDialog").onClick(() => {
TextPickerDialog.show({
range: this.fruits,
selected: this.select,
onAccept: (value: TextPickerResult) => {
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
this.select = value.index
},
onCancel: () => {
console.info("TextPickerDialog:onCancel()")
},
onChange: (value: TextPickerResult) => {
console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29