【鸿蒙开发】第4课,Checkbox与CheckboxGroup

118 阅读5分钟

Checkbox与CheckboxGroup详解

1 Checkbox基础介绍

Checkbox是一种常用的用户界面元素,用于表示二进制选择状态,即“选中”或“未选中”。它通常用于开启或关闭某个特定的功能、选项或设置。在表单中,Checkbox可以代表一个独立的选项,例如用户可以选择是否同意条款、接收通讯等。

1.1 基本用法

在鸿蒙开发中,Checkbox组件的使用相对简单。开发者可以通过设置其selected属性来控制其选中状态,并通过onChange事件监听用户的选择变化。例如:

动画.gif

@Entry
@Component
struct CheckboxExample {
    @State isChecked: boolean = false; // 保存选中状态

    build() {
        Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
            Checkbox({name: 'checkbox1', group: 'settings'}) // 多选框组件
                .select(this.isChecked) // 设置初始选中状态
                .selectedColor(0xed6f21) // 选中状态颜色
                .shape(CheckBoxShape.CIRCLE) // 圆形样式
                .onChange((value) => this.isChecked = value) // 更新状态
        }
        .width('100%')
        .height('100%')
    }
}

1.2 常用属性

Checkbox组件提供了多个属性供开发者自定义其外观和行为,包括但不限于:

  • name:Checkbox的名称,用于在CheckboxGroup中标识该Checkbox。
  • group:Checkbox所属的组名,用于实现CheckboxGroup的功能。
  • selectedColor:Checkbox选中时的颜色。
  • shape:Checkbox的形状,可以是圆形(CheckBoxShape.CIRCLE)或圆角方形(CheckBoxShape.ROUNDED_SQUARE)。
  • select:Checkbox的选中状态,支持双向绑定。

2 CheckboxGroup基础介绍

当需要控制多个Checkbox的选中状态时,CheckboxGroup组件就显得尤为重要。CheckboxGroup是一组相关的Checkbox的容器,它可以帮助管理和同步多个Checkbox的状态。

2.1 基本用法

CheckboxGroup的使用也非常简单。开发者可以通过设置其group属性来指定要管理的Checkbox组,并通过onChange事件监听组内Checkbox选择状态的变化。例如:

动画.gif

@Entry
@Component
struct CheckboxGroupExample {
  @State selectedKeys: string[] = []; // 保存选中的Checkbox名称

  build() {
    Column() {
      Row(){
        CheckboxGroup({ group: 'food' })
          .onChange((res) => {
            this.selectedKeys = res.name;
          })
        Text(this.selectedKeys.toString())
      }

      ForEach(['西瓜', '西红柿', '西兰花', '西葫芦'], (item: string, index: number) => {
        Row() {
          Checkbox({ group: 'food', name: item })
          Text(item)
        }
      })
    }.alignItems(HorizontalAlign.Start)
  }
}

2.2 常用属性

CheckboxGroup组件同样提供了多个属性供开发者自定义其行为,包括但不限于:

  • group:CheckboxGroup管理的Checkbox组名。
  • onChange:当组内Checkbox选择状态发生变化时触发的事件处理函数。
  • selectAll:是否默认全选组内所有Checkbox,支持双向绑定。

3 Checkbox与CheckboxGroup的实战应用

在实际项目中,Checkbox和CheckboxGroup的组合使用可以极大地提升用户界面的交互性和易用性。以下是一个简单的实战示例,展示如何在购物车页面中使用Checkbox和CheckboxGroup来实现商品的全选和反选功能。

动画.gif

3.1 静态结构定义

首先,定义商品信息的静态结构:

interface GoodInfo {
    id: number; // 商品ID
    name: string; // 商品名称
    img: ResourceStr; // 商品图片
    price: number; // 商品价格
    count: number; // 商品数量
}

3.2 页面结构构建

然后,在页面中构建商品列表和全选CheckboxGroup:

// 定义商品信息的接口
interface GoodInfo {
  id: number; // 商品ID
  name: string; // 商品名称
  img: ResourceStr; // 商品图片
  price: number; // 商品价格
  count: number; // 商品数量
}

@Entry
  // 装饰器,表示这是页面的入口
@Component
  // 装饰器,表示这是一个组件
struct Index {
  // 初始化商品列表
  goodList: GoodInfo[] = [
    {
      id: 1, // 商品1的ID
      name: '商品1', // 商品1的名称
      img: $r('app.media.startIcon'), // 商品1的图片链接
      price: 25.8, // 商品1的价格
      count: 2 // 商品1的数量
    },
    {
      id: 2, // 商品2的ID
      name: '商品2', // 商品2的名称
      img: $r('app.media.startIcon'), // 商品2的图片链接
      price: 14.9, // 商品2的价格
      count: 3 // 商品2的数量
    },
  // 更多商品信息...
  ];
  // 保存选中的商品ID的状态
  @State selectedGoods: string[] = [];

  // 构建UI界面
  build() {
    Column() { // 使用垂直线性布局
      // 商品列表
      List() { // 列表组件
        ForEach(this.goodList, (item: GoodInfo) => { // 遍历商品列表
          ListItem() { // 列表的每一项
            Row({ space: 10 }) { // 使用水平线性布局,设置子组件间距为10
              // 复选框,用于选择商品
              Checkbox({ name: item.id.toString(), group: 'foods' })
                .selectedColor('#eb4646') // 设置选中时的颜色
              // 商品图片,图片展示在后面章节详解
              Image(item.img)
                .width(100)// 设置图片宽度
                .borderRadius(20) // 设置图片圆角
              Column() { // 垂直布局,显示商品名称、价格和数量
                // 商品名称
                Text(item.name)
                  .maxLines(2)// 最多显示两行
                  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出部分用省略号表示
                Blank() // 空白占位符
                // 商品价格和数量
                Row() { // 水平布局
                  // 商品价格
                  Text(${item.price.toFixed(2)}`)
                    .fontColor(Color.Red)// 设置字体颜色为红色
                    .fontSize(20) // 设置字体大小
                  Blank() // 空白占位符
                  // 商品数量
                  Text(`x ${item.count}`)
                    .fontColor(Color.Gray)// 设置字体颜色为灰色
                    .fontSize(14) // 设置字体大小
                }
              }
            }
            .height(110) // 设置每一项的高度
            .padding(10) // 设置内边距
          }
        })
      }
      .divider({ strokeWidth: 1, startMargin: 40, endMargin: 20 }) // 设置列表分隔线
      .edgeEffect(EdgeEffect.Fade) // 设置滚动时的边缘渐变效果
      .layoutWeight(1) // 占用剩余空间
      .width('100%') // 设置宽度为100%
      .height('100%')

      // 结算区域
      Row() { // 水平布局
        // 全选复选框
        CheckboxGroup({ group: 'foods' })
          .onChange((res) => { // 当选中状态变化时触发
            this.selectedGoods = res.name; // 更新选中的商品ID
          })
          .selectedColor('#d8534c') // 设置选中时的颜色
        // "全选"文字
        Text('全选')
        // 合计价格和显示
        Text() {
          Span('合计') // 显示“合计”
          Span(${this.calculateTotalPrice().toFixed(2)}`)// 显示总价格
            .fontColor('#d8534c') // 设置字体颜色
        }
        .layoutWeight(1) // 占用剩余空间
        .textAlign(TextAlign.Center) // 文本居中对齐

        // 结算按钮
        Button('结算')
          .type(ButtonType.Normal)// 设置按钮类型
          .height('100%')// 设置按钮高度
          .width(120)// 设置按钮宽度
          .backgroundColor('#d8534c') // 设置按钮背景颜色
      }
      .height(50) // 设置结算区域高度
      .backgroundColor(Color.White) // 设置背景颜色为白色
      .width('100%') // 设置宽度为100%
    }
    .height('100%') // 设置整体高度
  }

  // 计算选中商品的总价格
  private calculateTotalPrice(): number {
    let total = 0; // 初始化总价格为0
    this.selectedGoods.forEach(id => { // 遍历选中的商品ID
      const good = this.goodList.find(item => item.id.toString() === id); // 查找对应的商品
      if (good) { // 如果商品存在
        total += good.price * good.count; // 累加商品的总价
      }
    });
    return total; // 返回总价格
  }
}

在这个示例中,我们使用了Checkbox组件来表示每个商品的选中状态,并使用CheckboxGroup组件来实现商品的全选和反选功能。当用户点击全选Checkbox时,CheckboxGroup会触发onChange事件,我们可以通过该事件处理函数来获取当前选中的商品ID,并据此计算购物车中的总价格。