Checkbox 的簡易使用

Checkbox 是 HarmonyOS 中的多選框組件，用于表示某選項(xiàng)的打開或關(guān)閉狀態(tài)。以下是其簡易使用方法：

1. 引入與基本使用

在.ets文件中，通過@Entry和@Component裝飾器定義組件，在build函數(shù)中創(chuàng)建Checkbox實(shí)例。例如：

@Entry
@Component
struct CheckboxExample {
  build() {
    Flex({ justifyContent: FlexAlign.SpaceAround }) {
      Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
      .select(true)
      .selectedColor(0xed6f21)
      .shape(CheckBoxShape.CIRCLE)
      .onChange((value: boolean) => {
          console.info('Checkbox1 change is' + value)
        })
    }
  }
}

2. 常用屬性

• select：設(shè)置多選框是否選中，支持雙向綁定變量（API version 10 及以上），默認(rèn)值為false。
• selectedColor：設(shè)置選中狀態(tài)顏色，默認(rèn)值為$r('sys.color.ohos_id_color_text_primary_activated')。
• unselectedColor（API version 10 及以上）：設(shè)置非選中狀態(tài)邊框顏色，默認(rèn)值為$r('sys.color.ohos_id_color_switch_outline_off')。
• mark（API version 10 及以上）：設(shè)置內(nèi)部圖標(biāo)樣式，API version 12 及以上若設(shè)置了indicatorBuilder，則按其內(nèi)容顯示。
• shape（API version 11 及以上）：設(shè)置組件形狀，可選值為CheckBoxShape.CIRCLE（圓形，默認(rèn)）和CheckBoxShape.ROUNDED_SQUARE（圓角方形）。
• contentModifier（API version 12 及以上）：用于定制 CheckBox 內(nèi)容區(qū)，需自定義類實(shí)現(xiàn)ContentModifier接口。

3. 事件處理

通過onChange事件監(jiān)聽選中狀態(tài)變化，回調(diào)函數(shù)中會(huì)返回當(dāng)前選中狀態(tài)（true為選中，false為未選中）。例如：

Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })
.onChange((value: boolean) => {
  console.info('Checkbox1 change is' + value)
})

4. 示例場景

• 設(shè)置多選框形狀：可通過shape屬性配置為圓形或圓角方形，如示例 1。
• 設(shè)置多選框顏色：使用selectedColor、unselectedColor和mark等屬性自定義顏色，如示例 2。
• 自定義多選框樣式：利用contentModifier屬性（API version 12 及以上），結(jié)合自定義組件實(shí)現(xiàn)復(fù)雜樣式，如示例 3 中創(chuàng)建了五邊形復(fù)選框及選中狀態(tài)變化時(shí)的不同顯示效果。

總之，Checkbox 組件功能豐富，能滿足多種場景下的多選框需求，開發(fā)者可根據(jù)實(shí)際情況靈活運(yùn)用其屬性和事件。