HarmonyOS-UIAbitity-Checkbox
多选框组件,通常用于某选项的打开或关闭。
接口
Checkbox( options?: {name?: string, group?: string} )
参数:
参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
---|---|---|---|---|
name | string | 否 | - | 多选框名称。 |
group | string | 否 | - | 多选框的群组名称。 |
属性
名称 | 参数类型 | 默认值 | 描述 |
---|---|---|---|
select | boolean | false | 设置多选框是否选中。 |
selectedColor | ResourceColor | - | 设置多选框选中状态颜色。 |
事件
名称 | 功能描述 |
---|---|
onChange(callback: (value: boolean) => void) | 当选中状态发生变化时,触发该回调。 - value为true时,表示已选中。 - value为false时,表示未选中。 |
复选框示例:
示例代码:
@Entry @Component struct Index { @State msg: string = "" build() { Row() { Column() { Text(this.msg).fontSize(50).fontColor(Color.Red) } Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }) .select(true) .selectedColor(0xed6f21) .onChange((value: boolean) => { if (this.msg.indexOf("鲜花") == -1) { this.msg = "鲜花," } }) .width('200px') .height('200px') Blank() Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }) .select(false) .selectedColor(0x39a2db) .onChange((value: boolean) => { if (this.msg.indexOf("掌声") == -1) { this.msg = "掌声," } }) .width('200px') .height('200px') } } }
这里为了看着大一些,我设置的宽高都比较大,根据自己的需求修改即可。