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 用来获取选中的选项的值（即 aaa、bbb、ccc 或 ddd）。
- console.info(...) 打印出选择的索引和选中的值，帮助调试和查看用户的选择。

4. 容器宽度设置

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

总结

该组件定义了一个下拉选择框，提供了 4 个选项（aaa、bbb、ccc、ddd）。
默认选中的选项索引为 1，即显示 bbb。
通过链式调用方法，设置了下拉框的字体样式、颜色以及选中项的显示效果。
当用户选择不同的选项时，onSelect 回调会输出选中的项的索引和对应的值。