多選框組件

2024-01-22 17:05 更新

提供多選框組件,通常用于某選項的打開或關(guān)閉。

說明

該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

接口

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

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

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

name

string

多選框名稱。

group

string

多選框的群組名稱。

說明:

未配合使用CheckboxGroup組件時,此值無用。

屬性

除支持通用屬性外,還支持以下屬性:

名稱

參數(shù)類型

描述

select

boolean

設(shè)置多選框是否選中。

默認(rèn)值:false

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

selectedColor

ResourceColor

設(shè)置多選框選中狀態(tài)顏色。

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

事件

支持通用事件外,還支持以下事件:

名稱

功能描述

onChange(callback: (value: boolean) => void)

當(dāng)選中狀態(tài)發(fā)生變化時,觸發(fā)該回調(diào)。

- value為true時,表示已選中。

- value為false時,表示未選中。

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

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct CheckboxExample {
  5. build() {
  6. Row() {
  7. Checkbox({name: 'checkbox1', group: 'checkboxGroup'})
  8. .select(true)
  9. .selectedColor(0xed6f21)
  10. .onChange((value: boolean) => {
  11. console.info('Checkbox1 change is'+ value)
  12. })
  13. Checkbox({name: 'checkbox2', group: 'checkboxGroup'})
  14. .select(false)
  15. .selectedColor(0x39a2db)
  16. .onChange((value: boolean) => {
  17. console.info('Checkbox2 change is'+ value)
  18. })
  19. }
  20. }
  21. }

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號