多选不再难：探索 Checkbox 设计的最佳实践

梁林烁
572 阅读4分钟

环境及工具

HarmonyOS 5.0.0 Release
DevEcoStudio
适用于HarmonyOS Next原生开发

Checkbox&CheckboxGroup

Checkbox 和 CheckboxGroup 是用户界面设计中常见的组件，主要用于表单或设置页面，让用户能够选择一个或多个选项。它们是人机交互中的重要元素，帮助用户与应用程序进行沟通。

Checkbox（多选框）

功能描述：

  • 一个单独的 Checkbox 组件允许用户在两种状态之间切换：选中和未选中。
  • 它通常用于开启或关闭某个特定的功能、选项或设置。
  • 在表单中，Checkbox 可以代表一个独立的选项，用户可以选择是否同意条款、接收通讯等。

使用场景：

  • 当有明确的二元对立的选择时，例如“是/否”、“开/关”、“同意/不同意”。
  • 用户可以独立地选择或取消选择，而不影响其他选项。

CheckboxGroup（多选框群组）

功能描述：

  • CheckboxGroup 是一组相关的 Checkbox 的容器，它可以帮助管理和同步多个 Checkbox 的状态。
  • 使用 CheckboxGroup 可以更容易地实现全选、取消全选、反选等功能。
  • 它确保了这一组内的 Checkbox 共享某些逻辑，比如限制最多只能选中一定数量的选项。

使用场景：

  • 当需要用户从多个相关联的选项中选择一个或多个项目时。
  • 提供了更高级别的控制，如一次性操作所有子项（全选/取消全选）。

交互特性：

  • 全选/取消全选：  CheckboxGroup 可能包含一个特殊的 Checkbox，用于快速选中或取消选中所有的子 Checkbox。
  • 部分选中状态：  如果在一组 Checkbox 中，有的被选中而其他的没有，那么这个组的全选 Checkbox 可能会显示为部分选中状态（通常是半勾或灰色），表明不是所有子项都被选中。
  • 互斥规则：  在某些情况下，可能需要设定一些规则，比如最少要选中一个选项，或者最多只能选中一定数量的选项

1. Checkbox

1.1 基本使用

Checkbox(options?: CheckboxOptions)

参数CheckboxOptions说明

名称类型必填描述
namestring否用于指定多选框名称。一般结合CheckboxGroup一起使用
groupstring否用于指定多选框所属群组的名称（即所属CheckboxGroup的名称）。

1.2 常用属性

名称参数类型描述
selectboolean设置多选框是否选中。 默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。 从API version 10开始，该属性支持$$双向绑定变量。
selectedColorResourceColor设置多选框选中状态颜色。 说明： 默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)。 异常值按照默认值处理。 从API version 9开始，该接口支持在ArkTS卡片中使用。
unselectedColorResourceColor设置多选框非选中状态边框颜色。
shapeCheckBoxShape设置CheckBox组件形状, 包括圆形和圆角方形。 说明： 默认值：CheckBoxShape.CIRCLE。

1.3学以致用

image.png

@Entry
@Component
struct Page03_Checkbox {
  @State isChecked:boolean = false
  build() {
    Column(){
      Text('选中状态:'+this.isChecked)
      Row(){
        Checkbox()
          .borderWidth(0)
          .selectedColor('#ab8b53')
          .select($$this.isChecked)
        Text(){
          Span('已阅读并同意')
            .fontColor(Color.Gray)
          Span('《用户协议》')
          Span('《隐私协议》')
        }
        .fontSize(14)
        .fontColor('#0094ff')
      }
      Button('切换选中状态')
        .onClick(()=>{
          this.isChecked=!this.isChecked
        })
    }
    .padding(20)
  }
}

2 CheckboxGroup

2.1基本使用

CheckboxGroup(options?: CheckboxGroupOptions)

参数说明(CheckboxGroupOptions)

名称类型必填说明
groupstring否群组名称。 说明： 多个相同群组名称的CheckboxGroup，仅第一个CheckboxGroup生效。

2.2常用属性

名称参数类型描述
selectAllboolean设置是否全选。 默认值：false，若同组的Checkbox设置了select属性，则Checkbox的优先级高。 该属性支持$$,双向绑定变量。
selectedColorResourceColor设置被选中或部分选中状态的颜色。
unselectedColorResourceColor设置非选中状态边框颜色。
// CheckboxGroup 和 Checkbox 的组名一致，即可实现全选和反选
CheckboxGroup({
  group: '组名'
})
Checkbox({
  group: '组名',
})
Checkbox({
  group: '组名',
})
Checkbox({
  group: '组名',
})

2.3学以致用

image.png

interface Goods {
  id: number
  name: string
  price: number
  count: number
}

@Entry
@Component
struct Page05_CheckboxGroup {
  fruits: string[] = ['西瓜', '西红柿', '西兰花', '西葫芦']

  build() {
    Column() {
      Text('选中的是:' + this.selectedKeys)
      Row() {
        CheckboxGroup({
          group: 'food'
        })

        Text('全选')
      }

      Column() {
        ForEach(this.fruits, (item: string, index: number) => {
          Row() {
            Checkbox({
              group: 'food'
            })
            Text(item)
          }
        })
      }
      .padding({ left: 20 })
      .alignItems(HorizontalAlign.Start)
    }
    .padding(20)
    .alignItems(HorizontalAlign.Start)

  }
}

实践心得

  • 保持一致性：确保 Checkbox 和 CheckboxGroup 的视觉设计在整个应用程序中保持一致，以提供连贯的用户体验。
  • 明确性：每个 Checkbox 应该有清晰的文字说明，帮助用户理解选择的意义。
  • 性能考虑：对于大量 Checkbox 的情况，考虑分页显示或者采用更高效的渲染方式。
  • 可访问性：保证 Checkbox 对屏幕阅读器和其他辅助技术友好，例如通过 aria-label 或者 aria-labelledby 提供额外信息。
avatar
文章
阅读
粉丝