鸿蒙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 = false

  build() {
    Column({ space: 20 }) {
      Text('Checkbox基本用法示例').fontSize(20).fontWeight(FontWeight.Bold)

      Row({ space: 10 }) {
        // 基本复选框
        Checkbox()
          .select(this.isChecked)
          .onChange((value: boolean) => {
            this.isChecked = value
            console.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 = false

  build() {
    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中的表单选择组件，构建出更加优秀的鸿蒙应用。