介绍
Checkbox（复选框） 是一个常用的基础交互组件，允许用户从一组选项中选择一个或多个选项
应用场景
适用于：
- 表单同意条款
- 设置开关
- 多选爱好
接口
Checkbox(options?: CheckboxOptions)
参数：
- options：CheckboxOptions 类型，非必填，配置复选框的参数。
设置是否选中
设置多选框是否选中
select(value: boolean)
例子
Column() {
Row(){
Text("爱好：")
}
.width("100%")
Row(){
Checkbox()
.select(false)
Text("王者荣耀")
}
.width("100%")
Row(){
Checkbox()
.select(false)
Text("抖音")
}
.width("100%")
}
双向数据绑定
该属性支持 $$ 双向绑定变量
@State wzry: boolean = false
@State dy: boolean = false
build() {
Column() {
Row(){
Text("爱好：")
}
.width("100%")
Row(){
Checkbox()
.select($$this.wzry)
Text("王者荣耀")
}
.width("100%")
Row(){
Checkbox()
.select($$this.dy)
Text("抖音")
}
.width("100%")
Button("获取值")
.onClick( ()=>{
console.log("wzry：", this.wzry)
console.log("dy：",this.dy)
})
}
}
常用样式
设置形状
- Circle 圆形
- Square 方形
shape(value: CheckBoxShape)
例子：
Checkbox().shape(CheckBoxShape.ROUNDED_SQUARE);
设置选中状态的颜色
selectedColor(value: ResourceColor)
例子：
Checkbox().selectedColor('#007DFF');
设置未选中状态的边框颜色。
unselectedColor(value: ResourceColor)（API 10+）
例子：
Checkbox().unselectedColor('#CCCCCC');
自定义勾选标记的样式
如大小、颜色
mark(value: MarkStyle)（API 10+）
Checkbox().mark({ size: 20, color: '#FFFFFF' });
自定义样式
@Component
struct CustomCheckbox {
@State isChecked: boolean = false;
build() {
Row() {
Checkbox()
.select(this.isChecked)
.selectedColor('#4CAF50') // 绿色选中色
.shape(CheckBoxShape.Circle) // 圆形
.width(24)
.height(24)
.onChange((value: boolean) => {
this.isChecked = value;
});
Text('自定义复选框').fontSize(16);
}
}
}
事件处理
监听选中状态变化。
onChange(callback: (value: boolean) => void)
例子：
Checkbox().onChange((value: boolean) => {
console.log(`选中状态: ${value}`);
});