CheckBoxGroup

效果

子组件

无

参数

• group 组名 多个相同的群组名称,仅仅第一个 checkboxgroup 生效

属性

selectAll

设置是否全选 true 就是全选 false 就是非全选

selectedColor

选中的背景颜色

unselectedColor

没选中边框的背景颜色

mark

选中时候钩子的样式

事件

onChange

选中状态改变的时候触发

示例

@Entry
@Component
struct Index3 {
  @State result:string[] = ["嘿嘿嘿","啦啦啦"]
    build() {
      Column({space:20}){
        Row(){
          CheckboxGroup({group:'checkboxgroup'})
            .selectAll(false)
            .mark({
              strokeColor:Color.Yellow,
              size: 20,
              strokeWidth: 5
            })
            .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
            .selectedColor(Color.Red)
            .onChange((result:CheckboxGroupResult)=>{
              console.info("---------")
              console.info(result.name.toString())
              console.info(result.status.toString())
              console.info("-----------")
            })
          Text("全选").fontColor(Color.Red).fontSize(25)
        }

        Row(){
          Checkbox({name:'checkbox1',group:'checkboxgroup'})
            .width(30)
            .select(false)
            .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(false)
            .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("第二个")
        }
      }
    }
}