根据指定的选择范围创建文本选择器,展示在弹窗上。
该组件从API Version 8开始支持
TextPickerDialog.show
show(options?: TextPickerDialogOptions)
定义文本滑动选择器弹窗并弹出。
TextPickerDialogOptions参数:
参数名 | 参数类型 | 必填 | 参数描述 |
---|---|---|---|
range | string[] | Resource | 是 | 设置文本选择器的选择范围。 |
selected | number | 否 | 设置选中项的索引值。 默认值:0 |
value | string | 否 | 设置选中项的文本内容。当设置了selected参数时,该参数不生效。如果设置的value值不在range范围内,则默认取range第一个元素。 |
defaultPickerItemHeight | number | string | 否 | 设置选择器中选项的高度。 |
onAccept | (value: TextPickerResult) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
onChange | (value: TextPickerResult) => void | 否 | 滑动弹窗中的选择器使当前选中项改变时触发该回调。 |
TextPickerResult对象说明
名称 | 类型 | 描述 |
---|---|---|
value | string | 选中项的文本内容。 |
index | number | 选中项在选择范围数组中的索引值。 |
// xxx.ets
@Entry
@Component
struct TextPickerDialogExample {
private select: number | number[] = 2
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4', 'banana5']
build() {
Row() {
Column() {
Button("TextPickerDialog")
.margin(20)
.onClick(() => {
TextPickerDialog.show({
range: this.fruits,
selected: this.select,
onAccept: (value: TextPickerResult) => {
// 设置select为按下确定按钮时候的选中项index,这样当弹窗再次弹出时显示选中的是上一次确定的选项
this.select = value.index
console.info("TextPickerDialog:onAccept()" + JSON.stringify(value))
},
onCancel: () => {
console.info("TextPickerDialog:onCancel()")
},
onChange: (value: TextPickerResult) => {
console.info("TextPickerDialog:onChange()" + JSON.stringify(value))
}
})
})
}.width('100%')
}.height('100%')
}
}