HarmonOS 通用组件(Checkbox)

本文中 我们来说 通用组件中的 Checkbox
我们先搭起一个基本的架子组件

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Row() {
          
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们可以在Row 行组件中加入代码

Checkbox({name: "age"})
Text("年龄")

这样 就做出了一个 选择框 和一个 文本的效果

我们可以点击勾选 和 取消勾选

然后 我们可以监听它的状态改变
我们这样写

Checkbox({name: "age"}).onChange((value) => {
    console.log("状态value"+value);
})
Text("年龄")

此时 我们勾选/取消勾选 都会触发 onChange
这个方法接受一个参数 记录选择状态 true 选中 false 取消选中

在实际开发中 我们可以通过这种方式记录

@Entry
@Component
struct Index {

  @State Arr:Array<string> = [];

  build() {
    Row() {
      Column() {
        ForEach(
          this.Arr,
          (item)=>{
            Text(item)
          }
        )
        Row() {
         Checkbox({name: "health"}).onChange((value) => {
           if(value) {
             this.Arr.push("健康")
           }else{
             this.Arr = this.Arr.filter(item => item !== "健康");
           }
         })
         Text("健康")
          Checkbox({name: "longevity"}).onChange((value) => {
            if(value) {
              this.Arr.push("长寿")
            }else{
              this.Arr = this.Arr.filter(item => item !== "长寿");
            }
          })
          Text("长寿")
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

我们设置了两个Checkbox组件 然后 监听他们的 onChange
通过value判断 是否选中 或者 取消选择
如果是选中 将 内容 push到数组中 否则 从数组中过滤出去
最上面 用 ForEach 循环渲染了数组内容

这样 我们选择 就会将内容加入数组中

被我们取消的内容 就会从数组中移除

然后 我们还可以做一个分组
我们这样写

@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Row() {
          CheckboxGroup({ group: "hobby" })
          Text("全选")
        }
        Row() {
          Checkbox({ group: "hobby" })
          Text("电子游戏")
        }
        Row() {
          Checkbox({ group: "hobby" })
          Text("运动")
        }
        Row() {
          Checkbox({ group: "hobby" })
          Text("健身")
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}

CheckboxGroup 会声明出一个组 且 它是作为全选按钮出现在页面上的
然后 group属性 用来声明组名
所有 组名 group属性与它相同的 Checkbox组件 都会被分组到它下面
效果就是 我们点击全选 他们就会全部选中

我们取消全选 他们就会全部取消

然后 我们全部 取消 全选 也会自动取消