CheckboxGroup

多選框群組，用于控制多選框全選或者不全選狀態。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

無

接口

CheckboxGroup(options?: { group?: string })

創建多選框群組，可以控制群組內的Checkbox全選或者不全選，group值相同的Checkbox和CheckboxGroup為同一群組。

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數:

參數名	參數類型	必填	參數描述
group	string	否	群組名稱。說明：多個相同群組名稱的CheckboxGroup，僅第一個CheckboxGroup生效。

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數類型	描述
selectAll	boolean	設置是否全選。默認值：false，若同組的[Checkbox]設置了select屬性，則Checkbox的優先級高。從API version 9開始，該接口支持在ArkTS卡片中使用。說明：若同組的[Checkbox]顯式設置了select屬性，則Checkbox的優先級高。從API version 10開始，該屬性支持[$$]雙向綁定變量。
selectedColor	[ResourceColor]	設置被選中或部分選中狀態的顏色。從API version 9開始，該接口支持在ArkTS卡片中使用。
unselectedColor10+	[ResourceColor]	設置非選中狀態邊框顏色。
mark10+	[MarkStyle]	多選框內部圖標樣式。

事件

除支持[通用事件]外，還支持以下事件：

名稱	功能描述
onChange (callback: (event: [CheckboxGroupResult]) => void )	CheckboxGroup的選中狀態或群組內的Checkbox的選中狀態發生變化時，觸發回調。從API version 9開始，該接口支持在ArkTS卡片中使用。

CheckboxGroupResult對象說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱	類型	描述
name	Array	群組內所有被選中的多選框名稱。
status	[SelectStatus]	選中狀態。

SelectStatus枚舉說明

從API version 9開始，該接口支持在ArkTS卡片中使用。

名稱	描述
All	群組多選擇框全部選擇。
Part	群組多選擇框部分選擇。
None	群組多選擇框全部沒有選擇。

MarkStyle10+對象說明

名稱	類型	必填	默認值	描述
strokeColor	[ResourceColor]	否	Color.White	內部圖標顏色。
size	number	string	否	-
strokeWidth	number	string	否	2

示例

示例1

// xxx.ets
@Entry
@Component
struct CheckboxExample {
  build() {
    Scroll() {
      Column() {
        // 全選按鈕
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((itemName: CheckboxGroupResult) = > {
              console.info("checkbox group content" + JSON.stringify(itemName))
            })
          Text('Select All').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }

        // 選項1
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((value: boolean) = > {
              console.info('Checkbox1 change is' + value)
            })
          Text('Checkbox1').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })

        // 選項2
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((value: boolean) = > {
              console.info('Checkbox2 change is' + value)
            })
          Text('Checkbox2').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })

        // 選項3
        Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
            .selectedColor('#007DFF')
            .onChange((value: boolean) = > {
              console.info('Checkbox3 change is' + value)
            })
          Text('Checkbox3').fontSize(14).lineHeight(20).fontColor('#182431').fontWeight(500)
        }.margin({ left: 36 })
      }
    }
  }
}

checkboxGroup

示例2

// xxx.ets
@Entry
@Component
struct Index {

  build() {
    Row() {
      Column() {
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          CheckboxGroup({ group: 'checkboxGroup' })
            .selectedColor(Color.Orange)
            .onChange((itemName: CheckboxGroupResult) = > {
              console.info("checkbox group content" + JSON.stringify(itemName))
            })
            .mark({
              strokeColor:Color.Black,
              size: 40,
              strokeWidth: 5
            })
            .unselectedColor(Color.Red)
            .width(30)
            .height(30)
          Text('Select All').fontSize(20)
        }.margin({right:15})
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
            .selectedColor(0x39a2db)
            .onChange((value: boolean) = > {
              console.info('Checkbox1 change is'+ value)
            })
            .mark({
              strokeColor:Color.Black,
              size: 50,
              strokeWidth: 5
            })
            .unselectedColor(Color.Red)
            .width(30)
            .height(30)
          Text('Checkbox1').fontSize(20)
        }
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox2', group: 'checkboxGroup' })
            .selectedColor(0x39a2db)
            .onChange((value: boolean) = > {
              console.info('Checkbox2 change is' + value)
            })
            .width(30)
            .height(30)
          Text('Checkbox2').fontSize(20)
        }
        Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
          Checkbox({ name: 'checkbox3', group: 'checkboxGroup' })
            .selectedColor(0x39a2db)
            .onChange((value: boolean) = > {
              console.info('Checkbox3 change is' + value)
            })
            .width(30)
            .height(30)
          Text('Checkbox3').fontSize(20)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}