HarmonyOS ArkTS 下拉列表组件

TypeScript 复制代码
@Entry
@Component
struct Index {
  defaultValue: string = '下拉列表';
  // 定义选项数组,包含 value 和可选的 label
  options: Array<SelectOption> = [
    { value: 'aaa' },
    { value: 'bbb' },
    { value: 'ccc' },
    { value: 'ddd' },
    { value: 'eee' },
    { value: 'fff' },
    { value: 'ggg' },
    { value: 'hhh' },
    { value: 'iii' },
    { value: 'jjj' },
    { value: 'kkk' },
    { value: 'lll' },
    { value: 'mmm' },
    { value: 'nnn' },
    { value: 'ooo' },
    { value: 'ppp' },
    { value: 'qqq' }
  ];

  build() {
    Column() {

      Select(this.options)
        // 设置初始选中的选项索引
        .selected(0)
          // 设置默认显示的文字
        .value(this.defaultValue)
          // 设置默认展示的字体大小和字重
        .font({ size: 25, weight: 600 })
          // 设置选择框字体的颜色
        .fontColor('#182431')
          // 设置已选择的项字体样式
        .selectedOptionFont({ size: 30, weight: 800 })
          // 设置下拉选项的字体样式
        .optionFont({ size: 20, weight: 400 })
          // 设置选择事件的回调函数
        .onSelect((index: number) => {
          // 选择项发生变化时打印选中的索引
          let selectedValue = this.options[index].value
          console.info('Select: index is ' + index + ' selectedValue is ' + selectedValue)
        })
    }.width('100%')

  }
}

这段代码是使用 ArkTS 编写的一个简单的 下拉选择框Select)组件,下面我会详细解释代码中的各个部分。

1. 结构和组件定义

TypeScript 复制代码
@Entry

@Component

struct Index {

}
  • @Entry:这表示该组件是入口组件,通常在应用程序启动时会加载此组件。
  • @Component:标记该结构体为 ArkTS 中的一个组件,这使得 Index 结构体能够渲染 UI。
  • struct Index:定义一个名为 Index 的结构体,它代表该组件的内容。结构体可以包含状态(如数据)和方法(如 UI 构建方法)。

2. 组件状态和选项数据

TypeScript 复制代码
defaultValue: string = '下拉列表';
  // 定义选项数组,包含 value 和可选的 label
  options: Array<SelectOption> = [
    { value: 'aaa' },
    { value: 'bbb' },
    { value: 'ccc' },
    { value: 'ddd' },
    { value: 'eee' },
    { value: 'fff' },
    { value: 'ggg' },
    { value: 'hhh' },
    { value: 'iii' },
    { value: 'jjj' },
    { value: 'kkk' },
    { value: 'lll' },
    { value: 'mmm' },
    { value: 'nnn' },
    { value: 'ooo' },
    { value: 'ppp' },
    { value: 'qqq' }
  ];
  • selectedValue :这是一个字符串类型的状态,表示当前选中的下拉选项的值,初始值为 '下拉列表'
  • options :这是一个 Array<SelectOption> 类型的数组,表示下拉框的选项列表。每个选项是一个对象,包含一个 value 字段(选项的值)。此处使用的是简化的选项对象结构,只有 value 字段。
    • 注意 :这里的 SelectOption 是一个类型或接口,它并没有明确显示,但可以推测其结构应该至少包含一个 value: string 字段。

3. 构建 UI

TypeScript 复制代码
build() {
    Column() {

      Select(this.options)
        // 设置初始选中的选项索引
        .selected(0)
          // 设置默认显示的文字
        .value('下拉列表')
          // 设置默认展示的字体大小和字重
        .font({ size: 25, weight: 600 })
          // 设置选择框字体的颜色
        .fontColor('#182431')
          // 设置已选择的项字体样式
        .selectedOptionFont({ size: 30, weight: 800 })
          // 设置下拉选项的字体样式
        .optionFont({ size: 20, weight: 400 })
          // 设置选择事件的回调函数
        .onSelect((index: number) => {
          // 选择项发生变化时打印选中的索引
          let selectedValue = this.options[index].value
          console.info('Select: index is ' + index + ' selectedValue is ' + selectedValue)
        })
    }.width('100%')

  }

这是 Index 组件的 build 方法,用来定义该组件的 UI。

  • Column():表示该 UI 组件的布局容器(类似于一个垂直的线性布局容器),所有子元素会在这个容器中垂直排列。
  • Select(this.options) :这是一个下拉选择框组件,this.options 作为参数传入,表示下拉框的选项列表。
    • Select 组件将使用 options 数组中的对象来渲染下拉框,value 字段对应每个选项的显示值。
链式方法设置:
  • .selected(1) :设置默认选中的选项索引为 1(即选择 bbb,因为索引是从 0 开始的)。
  • .value('下拉列表') :设置选择框的默认显示值,即下拉框的显示文字。这里的 '下拉列表' 是静态文本,显示在下拉框中。
  • .font({ size: 16, weight: 500 }):设置下拉框中显示文本的字体大小为 16px,加粗程度为 500。
  • .fontColor('#182431') :设置下拉框中显示文本的颜色为 #182431
  • .selectedOptionFont({ size: 30, weight: 800 }):设置已选中的选项的字体样式,字体大小为 30px,粗细为 800(即加粗)。
  • .optionFont({ size: 16, weight: 400 }):设置下拉选项的字体样式,字体大小为 16px,正常粗细(400)。
  • .onSelect((index: number) => {...}) :设置选项选择时的回调函数。当用户选择下拉框中的某个选项时,会触发 onSelect 方法。该方法接收 index(选中的选项的索引)作为参数:
    • 在回调函数中,this.options[index].value 用来获取选中的选项的值(即 aaabbbcccddd)。
    • console.info(...) 打印出选择的索引和选中的值,帮助调试和查看用户的选择。

4. 容器宽度设置

  • .width('100%'):设置 Column() 容器的宽度为 100%。这意味着下拉框会占据屏幕或父容器的全部宽度。

总结

  • 该组件定义了一个下拉选择框,提供了 4 个选项(aaabbbcccddd)。
  • 默认选中的选项索引为 1,即显示 bbb
  • 通过链式调用方法,设置了下拉框的字体样式、颜色以及选中项的显示效果。
  • 当用户选择不同的选项时,onSelect 回调会输出选中的项的索引和对应的值。
相关推荐
Sonetto19995 分钟前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
沐土Arvin5 分钟前
理解npm的工作原理:优化你的项目依赖管理流程
开发语言·前端·javascript·设计模式·npm·node.js
大新新大浩浩8 分钟前
arm64适配系列文章-第三章-arm64环境上mariadb的部署
数据库·arm·mariadb
聪明的墨菲特i11 分钟前
SQL进阶知识:九、高级数据类型
xml·数据库·sql·mysql·json·空间数据类型
oioihoii16 分钟前
金仓数据库 KingbaseES 产品深度优化提案:迈向卓越的全面升级
数据库·性能优化·金融·金仓数据库 2025 征文·数据库平替用金仓
好_快21 分钟前
Lodash源码阅读-baseUniq
前端·javascript·源码阅读
不秃的开发媛22 分钟前
前端技术Ajax入门
java·开发语言·前端
艺杯羹24 分钟前
JDBC 批处理与事务处理:提升数据操作效率与一致性的密钥
数据库·mysql·jdbc·事务处理·批处理数据
牧羊狼的狼26 分钟前
React.memo 和 useMemo
前端·javascript·react.js
xixixin_34 分钟前
【uniapp】vue2 搜索文字高亮显示
java·服务器·前端·uni-app·交互·文字高亮