鸿蒙NEXT表单选择组件详解：Radio与Checkbox的使用指南

在鸿蒙应用开发中，表单选择组件是用户交互的核心要素，本文将全面介绍几种常用表单选择组件的使用方法与实战技巧。

在鸿蒙应用开发中，表单是用户与应用进行交互的重要界面元素。合理使用表单选择组件不仅能提升用户体验，还能确保数据的准确性和完整性。

今天我们将深入探讨鸿蒙NEXT中几种常用表单选择组件的使用方法，包括Radio单选框、Checkbox复选框等，并通过实际代码示例展示如何在实际项目中应用它们。

1. Radio单选框组件

Radio单选框是一种表单元素，允许用户从一组选项中选择一个选项2。它由一个圆圈和一个标签组成，用户只能选择其中一个选项2。Radio单选框通常用于表单中，用于收集用户选择的信息，例如用户性别、年龄、爱好等等2。

1.1 创建Radio单选框

在鸿蒙HarmonyOS中，可以使用以下语法创建Radio单选框：2

typescript

Radio(options: {value: string, group: string})

以下是一个基本的创建示例：2

typescript

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {build() {Row() {Radio({ value: 'Radio1', group: 'radioGroup' }).checked(false)Radio({ value: 'Radio2', group: 'radioGroup' }).checked(true)}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })}
}

1.2 添加事件处理

Radio组件提供了onChange事件，可以监听选中状态的变化：2

typescript

// xxx.ets
import router from '@ohos.router';
@Entry
@Component
struct Index {build() {Row() {Radio({ value: 'Radio1', group: 'radioGroup' }).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作console.log('1')}})Radio({ value: 'Radio2', group: 'radioGroup' }).onChange((isChecked: boolean) => {if(isChecked) {//需要执行的操作console.log('2')}})}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })}
}

1.3 Radio组件的应用场景

Radio按钮适用于任何需要用户在几个选项中进行选择的场景：2

• 设置偏好：当应用程序需要让用户选择一种选项，例如语言偏好或其他个人偏好设置时。

• 选择筛选条件：当用户需要在多个筛选条件中选择一个时，例如在电子商务网站中选择价格范围或产品类别。

• 选择付款方式：当用户需要在几种付款方式中选择一种时。

• 选择性别：在某些网站或应用程序中，当用户需要提供性别信息时。

• 多步骤表单：当构建具有多个步骤的表单时，可以使用Radio按钮来选择各个步骤之间的选项。

以下是一个完整的使用案例：2

typescript

// xxx.ets
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {build() {Row() {Column() {Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true).height(50).width(50).onChange((isChecked: boolean) => {if(isChecked) {// 切换为响铃模式promptAction.showToast({ message: 'Ringing mode.' })}})Text('Ringing')}Column() {Radio({ value: 'Radio2', group: 'radioGroup' }).height(50).width(50).onChange((isChecked: boolean) => {if(isChecked) {// 切换为振动模式promptAction.showToast({ message: 'Vibration mode.' })}})Text('Vibration')}Column() {Radio({ value: 'Radio3', group: 'radioGroup' }).height(50).width(50).onChange((isChecked: boolean) => {if(isChecked) {// 切换为静音模式promptAction.showToast({ message: 'Silent mode.' })}})Text('Silent')}}.height('100%').width('100%').justifyContent(FlexAlign.Center)}
}

2. Checkbox复选框组件

Checkbox（复选框）是HarmonyOS NEXT中一个常用的基础交互组件，它允许用户从一组选项中选择一个或多个选项5。Checkbox组件通常用于表示二元选择（选中或未选中），也可以用于多选列表中，让用户能够同时选择多个选项5。

2.1 Checkbox的基本概念

Checkbox组件是一个可选中的UI元素，通常显示为一个小方框，当用户选中时，方框内会显示一个勾选标记。它可以处于三种状态：未选中、选中和部分选中（通常用于表示子选项的混合状态）5。

Checkbox的常见应用场景包括：5

• 表单中的同意条款选项

• 设置页面中的功能开关

• 多选列表（如购物车商品选择）

• 任务清单中的完成标记

• 筛选条件的多选项

2.2 Checkbox的属性介绍

2.2.1 基础属性

2.2.2 样式属性

2.2.3 状态属性

2.2.4 事件属性

2.3 Checkbox的使用方法

2.3.1 基本用法

typescript

@Entry
@Component
struct CheckboxExample {@State isChecked: boolean = falsebuild() {Column({ space: 20 }) {Text('Checkbox基本用法示例').fontSize(20).fontWeight(FontWeight.Bold)Row({ space: 10 }) {// 基本复选框Checkbox().select(this.isChecked).onChange((value: boolean) => {this.isChecked = valueconsole.info(`复选框状态: ${value}`)})Text(`当前状态: ${this.isChecked ? '选中' : '未选中'}`).fontSize(16)}}.width('100%').padding(20)}
}

2.3.2 自定义样式

Checkbox组件支持多种样式自定义，包括颜色、形状、边框等：5

typescript

@Entry
@Component
struct CustomCheckboxExample {@State isChecked1: boolean = false@State isChecked2: boolean = false@State isChecked3: boolean = falsebuild() {Column({ space: 30 }) {Text('自定义复选框样式示例').fontSize(20).fontWeight(FontWeight.Bold)// 自定义颜色的复选框Row({ space: 10 }) {Checkbox().select(this.isChecked1).selectedColor('#FF5722')  // 自定义选中颜色.width(24).height(24).onChange((value: boolean) => {this.isChecked1 = value})Text('自定义颜色').fontSize(16)}// 自定义形状的复选框Row({ space: 10 }) {Checkbox().select(this.isChecked2).selectedColor('#4CAF50').width(24).height(24).borderRadius(12)  // 圆形复选框.onChange((value: boolean) => {this.isChecked2 = value})Text('圆形复选框').fontSize(16)}// 自定义边框的复选框Row({ space: 10 }) {Checkbox().select(this.isChecked3).selectedColor('#2196F3').width(24).height(24).borderWidth(2).borderColor('#2196F3').onChange((value: boolean) => {this.isChecked3 = value})Text('自定义边框').fontSize(16)}}.width('100%').padding(20)}
}

2.3.3 复选框组

Checkbox还可以组成复选框组，实现多选功能：5

typescript

@Entry
@Component
struct CheckboxGroupExample {@State fruits: string[] = []private allFruits: string[] = ['苹果', '香蕉', '橙子', '葡萄', '西瓜']build() {Column({ space: 20 }) {Text('复选框组示例').fontSize(20).fontWeight(FontWeight.Bold)Text(`已选水果: ${this.fruits.join(', ') || '无'}`).fontSize(16)// 水果选择列表Column({ space: 15 }) {ForEach(this.allFruits, (fruit: string) => {Row({ space: 10 }) {Checkbox().select(this.fruits.indexOf(fruit) !== -1).onChange((value: boolean) => {if (value) {this.fruits.push(fruit)} else {const index = this.fruits.indexOf(fruit)if (index !== -1) {this.fruits.splice(index, 1)}}// 更新状态，触发UI刷新this.fruits = [...this.fruits]})Text(fruit).fontSize(16)}})}}.width('100%').padding(20)}
}

3. 多选组件

多选组件用于一次性选择多个选项，例如收集用户兴趣爱好时，可选用该组件7。在多选组件的配置中，可以设置以下属性：7

• 显示名称：该字段在页面呈现给用户的名称

• 排列方式：选项值的排列方式，如下拉、竖排、横排

• 选项：选项设置，可以新增、删除、调整顺序

• 验证：对字段进行限制设置，如必填、限定选择个数

• 属性：设置字段的属性，包括只读、禁用和隐藏

4. 表单设计规范与最佳实践

在设计表单时，遵循一致的设计规范可以显著提升用户体验。以下是一些重要的设计规范：1

4.1 间距规范

4.2 字体规范

4.3 颜色规范

4.4 圆角规范

输入框和按钮统一使用8vp的圆角，保持视觉一致性1。

5. 状态管理与数据绑定

在表单组件中，状态管理和数据绑定是重要的概念。可以使用@State装饰器定义状态变量：1

typescript

@State username: string = ''
@State password: string = ''

@State装饰器用于定义组件的内部状态。当状态变量的值发生变化时，框架会自动重新渲染组件，更新UI1。

在TextInput组件中，通过text参数将输入框的值与状态变量绑定：1

typescript

TextInput({ text: this.username, placeholder: '请输入用户名' })

这种双向绑定机制确保：1

1. 当用户在输入框中输入文本时，状态变量的值会自动更新

2. 当状态变量的值通过其他方式更新时，输入框的显示也会相应更新

总结

鸿蒙NEXT提供了丰富而强大的表单选择组件，包括Radio单选框、Checkbox复选框以及多选组件等。合理使用这些组件，可以构建出体验良好的表单界面。

在使用这些组件时，需要注意以下几点：

1. 明确使用场景：Radio用于单选，Checkbox用于多选，不要混用

2. 保持样式一致：遵循设计规范，保持整体界面风格统一

3. 合理分组：对相关选项进行分组，提高表单的可读性和易用性

4. 提供明确反馈：通过事件处理和数据绑定，及时反馈用户操作结果

5. 考虑可访问性：确保表单组件对不同用户都可访问和操作

希望通过本文的介绍，能够帮助您更好地理解和使用鸿蒙NEXT中的表单选择组件，构建出更加优秀的鸿蒙应用。