CheckBox

鸿蒙开发以身入局
声明式 UI，内有大乾坤
组件学习开始了
掌握 CheckBox 组件

  • 复选框组件

参数

注意 ： 配合 CheckBoxGroup 使用

参数形式 ： Checkbox( options?: { name?: string, group?: string } )

参数名参数类型是否必填默认值参数描述
namestring否-多选框名称
groupstring否-多选框群组名称

属性

名称参数类型默认值描述
selectbooleanfalse设置多选框是否被选中
selectColorstring-设置多选框选中状态时的颜色

事件

名称描述
onChange( callback: ( value: boolean ) => void )当选中状态发生变化时，触发回调函数;当 value 的值为 true 时，表示已选中;当 value 的值为 false 时，表示未选中

示例 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@Entry
@Component
struct Index {
  build() {
    Row() {
      Checkbox()

      Blank()

      Checkbox().select(true)

      Blank()

      Checkbox().select(true).selectedColor(Color.Orange)

    }.width('100%').height(100).padding(20)
  }
}

示例 2

可以添加事件，当选中状态改变的时候会触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Entry
@Component
struct Index {
  @State count: number = 0

  build() {
    Row() {
      Checkbox()
        .onChange(value => {
          ++this.count
          console.log(`第 ${ this.count } 次点击，当前 value 参数的值为 ${ value }`)
        })
    }.width('100%').height(100).padding(20)
  }
}