CheckBox

效果

子组件

无

参数

name

指定多选框名称。

group

指定多选框所属的组名。

 Checkbox({name:'checkbox1',group:'checkBoxGroup'})

属性

select (初始化的时候使用)(重要)

设置选中状态(true)就是选中 false 就是未选中.

selectedColor(重要)

设置多选框选中状态颜色。

unselectedColor(不重要)

设置多选框非选中状态的边框颜色

mark

设置多选框 内部钩子的样式宽度 颜色.大小等等

 .mark({
    strokeColor:Color.Black,
    size: 150,
    strokeWidth: 5
})

shape

设置 CheckBox 组件形状，包括圆形和圆角方形。

.shape(CheckBoxShape.ROUNDED_SQUARE) // 方形
.shape(CheckBoxShape.CIRCLE) // 圆形

事件

onChange

.onChange((value:boolean)=>{
  console.log(value.toString())
})

示例

@Entry
@Component
struct Index2 {
    @State result:string[] = ["嘿嘿嘿","啦啦啦"]
    build() {
      Column(){
         Row(){
            Checkbox({name:'checkbox1',group:'checkBoxGroup'})
                .width(30)
                .select(true)
                .selectedColor(Color.Red)
                .unselectedColor(Color.Green)
                .shape(CheckBoxShape.CIRCLE)
                .mark({
                    strokeColor:Color.Black,
                    size: 20,
                    strokeWidth: 5
                })
                .onChange((value:boolean)=>{
                    console.info(value.toString())
                    if(value){
                        this.result.push('哈哈哈')
                        console.info(this.result.toString())
                    }else{
                        let demoresult:string[] = []
                        demoresult = this.result.filter((item)=>item!=='哈哈哈')
                        this.result = demoresult;
                        console.info(this.result.toString())
                    }
                })
             Text("第一个")
         }

          Row(){
              Checkbox({name:'checkbox2',group:'checkBoxGroup'})
                  .width(30)
                  .select(true)
                  .selectedColor(Color.Red)
                  .unselectedColor(Color.Green)
                  .shape(CheckBoxShape.CIRCLE)
                  .mark({
                      strokeColor:Color.Black,
                      size: 20,
                      strokeWidth: 5
                  })
                  .onChange((value:boolean)=>{
                      console.info(value.toString())
                      if(value){
                          this.result.push('噢噢噢噢')
                          console.info(this.result.toString())
                      }else{
                          let demoresult:string[] = []
                          demoresult = this.result.filter((item)=>item!=='噢噢噢噢')
                          this.result = demoresult;
                          console.info(this.result.toString())
                      }
                  })
              Text("第二个")
          }
      }
    }
}