Checkbox
提供多選框組件,通常用于某選項的打開或關(guān)閉。
說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標單獨標記該內(nèi)容的起始版本。
子組件
無
接口
Checkbox(options?: {name?: string, group?: string })
從API version 9開始,該接口支持在ArkTS卡片中使用。
參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
---|---|---|---|
name | string | 否 | 多選框名稱。 |
group | string | 否 | 多選框的群組名稱。**說明:**未配合使用CheckboxGroup組件時,此值無用。 |
屬性
除支持[通用屬性]外,還支持以下屬性:
名稱 | 參數(shù)類型 | 描述 |
---|---|---|
select | boolean | 設置多選框是否選中。 默認值:false 從API version 9開始,該接口支持在ArkTS卡片中使用。 從API version 10開始,該屬性支持[$$]雙向綁定變量。 |
selectedColor | [ResourceColor] | 設置多選框選中狀態(tài)顏色。 從API version 9開始,該接口支持在ArkTS卡片中使用。 |
unselectedColor10+ | [ResourceColor] | 設置多選框非選中狀態(tài)邊框顏色。 |
mark10+ | [MarkStyle] | 多選框內(nèi)部圖標樣式。 |
事件
支持[通用事件]外,還支持以下事件:
名稱 | 功能描述 |
---|---|
onChange(callback: (value: boolean) => void) | 當選中狀態(tài)發(fā)生變化時,觸發(fā)該回調(diào)。 - value為true時,表示已選中。 - value為false時,表示未選中。 從API version 9開始,該接口支持在ArkTS卡片中使用。 |
MarkStyle10+對象說明
名稱 | 類型 | 必填 | 默認值 | 描述 |
---|---|---|---|---|
strokeColor | [ResourceColor] | 否 | Color.White | 內(nèi)部圖標顏色。 |
size | number | string | 否 | - |
strokeWidth | number | stringHarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 | 否 | 2 |
示例
示例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%')
}
}
審核編輯 黃宇
-
組件
+關(guān)注
關(guān)注
1文章
517瀏覽量
17887 -
checkbox
+關(guān)注
關(guān)注
0文章
3瀏覽量
1116 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2392瀏覽量
42972
發(fā)布評論請先 登錄
相關(guān)推薦
評論