第九节HarmonyOS 常用基础组件11-TextPicker

1、描述

滑动选择文本内容的组件。

2、接口

TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string})

3、参数

|----------|----------------------|----|------------------------------------|
| 参数名称 | 参数类型 | 必填 | 描述 |
| range | string[]|Resource | 是 | 选择器的数据。 |
| selected | number | 否 | 设置默认选中项在数组中的索引。默认值:0。 |
| value | string | 否 | 设置默认选中项的值,优先级低于selected。默认值:第一个元素。 |

4、属性

除了支持通用属性外,还支持:

defaultPickerItemHeight - number|string - 设置picker各个选择项的高度。

5、事件

onAccept - 点击弹窗中的"确定"按钮时,触发该回调。

onCancel - 点击弹窗中的"取消"按钮时,触发该回调。

onChange - 滑动选中TextPicker文本后,触发该回调。

6、实例

复制代码
import router from '@ohos.router'

@Entry
@Component
struct TextPickerPage {
  @State message: string = '滑动选择文本内容的组件。'
  private pickerList: string[] = ['Android', 'IOS', 'Flutter', 'KMM']

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width('96%')

          Blank(20)
          TextPicker({ range: this.pickerList })
            .width('96%')
            .height(200)
            .onAccept((value: string, index: number) => {
              console.log("zdm", "TextPicker - onAccept value = " + value)
            })
            .onCancel(() => {
              console.log("zdm", "TextPicker - onCancel")
            })
            .onChange((value: string, index: number) => {
              console.log("zdm", "TextPicker - onChange value = " + value)
            })

          Blank(20)
          Button("TextPicker文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/textPicker/TextPickerDesc",
              })
            })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

7、效果图

相关推荐
周胡杰2 分钟前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
迷曳10 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
迷曳14 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
平谷一勺21 小时前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos
前端世界2 天前
跨平台 App 如何无痛迁移到鸿蒙系统?全流程实战+Demo 教程
华为·harmonyos
龙儿筝2 天前
鸿蒙和Android知识点
android·harmonyos
迷曳2 天前
17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
前端·harmonyos·鸿蒙
zhanshuo2 天前
不同品牌的设备也能“心有灵犀”?带你玩转鸿蒙分布式跨端协同
harmonyos
万少3 天前
云测试提前定位和解决问题 萤火故事屋 上架流程
前端·harmonyos·客户端