当前位置：首页 > news >正文

HarmonyOS ArkTS 下拉列表组件

news 2025/6/30 5:41:40

@Entry
@Component
struct Index {defaultValue: string = '下拉列表';// 定义选项数组，包含 value 和可选的 labeloptions: 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].valueconsole.info('Select: index is ' + index + ' selectedValue is ' + selectedValue)})}.width('100%')}
}

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

1. 结构和组件定义

@Entry@Componentstruct Index {}

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

2. 组件状态和选项数据

defaultValue: string = '下拉列表';// 定义选项数组，包含 value 和可选的 labeloptions: 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

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].valueconsole.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(...) 打印出选择的索引和选中的值，帮助调试和查看用户的选择。