鴻蒙ArkTS聲明式組件：Checkbox

Checkbox

提供多選框組件，通常用于某選項的打開或關閉。

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

子組件

無

接口

Checkbox(options?: {name?: string, group?: string })

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

參數:

參數名	參數類型	必填	參數描述
name	string	否	多選框名稱。
group	string	否	多選框的群組名稱。說明：未配合使用CheckboxGroup組件時，此值無用。

屬性

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

名稱	參數類型	描述
select	boolean	設置多選框是否選中。默認值：false 從API version 9開始，該接口支持在ArkTS卡片中使用。從API version 10開始，該屬性支持[$$]雙向綁定變量。
selectedColor	[ResourceColor]	設置多選框選中狀態顏色。從API version 9開始，該接口支持在ArkTS卡片中使用。
unselectedColor10+	[ResourceColor]	設置多選框非選中狀態邊框顏色。
mark10+	[MarkStyle]	多選框內部圖標樣式。

事件

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

名稱	功能描述
onChange(callback: (value: boolean) => void)	當選中狀態發生變化時，觸發該回調。 - value為true時，表示已選中。 - value為false時，表示未選中。從API version 9開始，該接口支持在ArkTS卡片中使用。

MarkStyle10+對象說明

名稱	類型	必填	默認值	描述
strokeColor	[ResourceColor]	否	Color.White	內部圖標顏色。
size	number	string	否	-
strokeWidth	number	string`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`	否	2

搜狗高速瀏覽器截圖20240326151344.png

示例

示例1

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

  build() {
    Row() {
      Checkbox({name: 'checkbox1',  group: 'checkboxGroup'})
        .select(true)
        .selectedColor(0xed6f21)
        .onChange((value: boolean) = > {
          console.info('Checkbox1 change is'+ value)
        })
      Checkbox({name: 'checkbox2',  group: 'checkboxGroup'})
        .select(false)
        .selectedColor(0x39a2db)
        .onChange((value: boolean) = > {
          console.info('Checkbox2 change is'+ value)
        })
    }
  }
}

示例2

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

  build() {
    Row() {
      Column() {
        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)
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}