Checkbox与CheckboxGroup详解
1 Checkbox基础介绍
Checkbox是一种常用的用户界面元素，用于表示二进制选择状态，即“选中”或“未选中”。它通常用于开启或关闭某个特定的功能、选项或设置。在表单中，Checkbox可以代表一个独立的选项，例如用户可以选择是否同意条款、接收通讯等。
1.1 基本用法
在鸿蒙开发中，Checkbox组件的使用相对简单。开发者可以通过设置其selected属性来控制其选中状态，并通过onChange事件监听用户的选择变化。例如：
@Entry
@Component
struct CheckboxExample {
@State isChecked: boolean = false; // 保存选中状态
build() {
Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
Checkbox({name: 'checkbox1', group: 'settings'}) // 多选框组件
.select(this.isChecked) // 设置初始选中状态
.selectedColor(0xed6f21) // 选中状态颜色
.shape(CheckBoxShape.CIRCLE) // 圆形样式
.onChange((value) => this.isChecked = value) // 更新状态
}
.width('100%')
.height('100%')
}
}
1.2 常用属性
Checkbox组件提供了多个属性供开发者自定义其外观和行为，包括但不限于：
name：Checkbox的名称，用于在CheckboxGroup中标识该Checkbox。group：Checkbox所属的组名，用于实现CheckboxGroup的功能。selectedColor：Checkbox选中时的颜色。shape：Checkbox的形状，可以是圆形（CheckBoxShape.CIRCLE）或圆角方形（CheckBoxShape.ROUNDED_SQUARE）。select：Checkbox的选中状态，支持双向绑定。
2 CheckboxGroup基础介绍
当需要控制多个Checkbox的选中状态时，CheckboxGroup组件就显得尤为重要。CheckboxGroup是一组相关的Checkbox的容器，它可以帮助管理和同步多个Checkbox的状态。
2.1 基本用法
CheckboxGroup的使用也非常简单。开发者可以通过设置其group属性来指定要管理的Checkbox组，并通过onChange事件监听组内Checkbox选择状态的变化。例如：
@Entry
@Component
struct CheckboxGroupExample {
@State selectedKeys: string[] = []; // 保存选中的Checkbox名称
build() {
Column() {
Row(){
CheckboxGroup({ group: 'food' })
.onChange((res) => {
this.selectedKeys = res.name;
})
Text(this.selectedKeys.toString())
}
ForEach(['西瓜', '西红柿', '西兰花', '西葫芦'], (item: string, index: number) => {
Row() {
Checkbox({ group: 'food', name: item })
Text(item)
}
})
}.alignItems(HorizontalAlign.Start)
}
}
2.2 常用属性
CheckboxGroup组件同样提供了多个属性供开发者自定义其行为，包括但不限于：
group：CheckboxGroup管理的Checkbox组名。onChange：当组内Checkbox选择状态发生变化时触发的事件处理函数。selectAll：是否默认全选组内所有Checkbox，支持双向绑定。
3 Checkbox与CheckboxGroup的实战应用
在实际项目中，Checkbox和CheckboxGroup的组合使用可以极大地提升用户界面的交互性和易用性。以下是一个简单的实战示例，展示如何在购物车页面中使用Checkbox和CheckboxGroup来实现商品的全选和反选功能。
3.1 静态结构定义
首先，定义商品信息的静态结构：
interface GoodInfo {
id: number; // 商品ID
name: string; // 商品名称
img: ResourceStr; // 商品图片
price: number; // 商品价格
count: number; // 商品数量
}
3.2 页面结构构建
然后，在页面中构建商品列表和全选CheckboxGroup：
// 定义商品信息的接口
interface GoodInfo {
id: number; // 商品ID
name: string; // 商品名称
img: ResourceStr; // 商品图片
price: number; // 商品价格
count: number; // 商品数量
}
@Entry
// 装饰器，表示这是页面的入口
@Component
// 装饰器，表示这是一个组件
struct Index {
// 初始化商品列表
goodList: GoodInfo[] = [
{
id: 1, // 商品1的ID
name: '商品1', // 商品1的名称
img: $r('app.media.startIcon'), // 商品1的图片链接
price: 25.8, // 商品1的价格
count: 2 // 商品1的数量
},
{
id: 2, // 商品2的ID
name: '商品2', // 商品2的名称
img: $r('app.media.startIcon'), // 商品2的图片链接
price: 14.9, // 商品2的价格
count: 3 // 商品2的数量
},
// 更多商品信息...
];
// 保存选中的商品ID的状态
@State selectedGoods: string[] = [];
// 构建UI界面
build() {
Column() { // 使用垂直线性布局
// 商品列表
List() { // 列表组件
ForEach(this.goodList, (item: GoodInfo) => { // 遍历商品列表
ListItem() { // 列表的每一项
Row({ space: 10 }) { // 使用水平线性布局，设置子组件间距为10
// 复选框，用于选择商品
Checkbox({ name: item.id.toString(), group: 'foods' })
.selectedColor('#eb4646') // 设置选中时的颜色
// 商品图片，图片展示在后面章节详解
Image(item.img)
.width(100)// 设置图片宽度
.borderRadius(20) // 设置图片圆角
Column() { // 垂直布局，显示商品名称、价格和数量
// 商品名称
Text(item.name)
.maxLines(2)// 最多显示两行
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出部分用省略号表示
Blank() // 空白占位符
// 商品价格和数量
Row() { // 水平布局
// 商品价格
Text(`¥${item.price.toFixed(2)}`)
.fontColor(Color.Red)// 设置字体颜色为红色
.fontSize(20) // 设置字体大小
Blank() // 空白占位符
// 商品数量
Text(`x ${item.count}`)
.fontColor(Color.Gray)// 设置字体颜色为灰色
.fontSize(14) // 设置字体大小
}
}
}
.height(110) // 设置每一项的高度
.padding(10) // 设置内边距
}
})
}
.divider({ strokeWidth: 1, startMargin: 40, endMargin: 20 }) // 设置列表分隔线
.edgeEffect(EdgeEffect.Fade) // 设置滚动时的边缘渐变效果
.layoutWeight(1) // 占用剩余空间
.width('100%') // 设置宽度为100%
.height('100%')
// 结算区域
Row() { // 水平布局
// 全选复选框
CheckboxGroup({ group: 'foods' })
.onChange((res) => { // 当选中状态变化时触发
this.selectedGoods = res.name; // 更新选中的商品ID
})
.selectedColor('#d8534c') // 设置选中时的颜色
// "全选"文字
Text('全选')
// 合计价格和显示
Text() {
Span('合计') // 显示“合计”
Span(`¥${this.calculateTotalPrice().toFixed(2)}`)// 显示总价格
.fontColor('#d8534c') // 设置字体颜色
}
.layoutWeight(1) // 占用剩余空间
.textAlign(TextAlign.Center) // 文本居中对齐
// 结算按钮
Button('结算')
.type(ButtonType.Normal)// 设置按钮类型
.height('100%')// 设置按钮高度
.width(120)// 设置按钮宽度
.backgroundColor('#d8534c') // 设置按钮背景颜色
}
.height(50) // 设置结算区域高度
.backgroundColor(Color.White) // 设置背景颜色为白色
.width('100%') // 设置宽度为100%
}
.height('100%') // 设置整体高度
}
// 计算选中商品的总价格
private calculateTotalPrice(): number {
let total = 0; // 初始化总价格为0
this.selectedGoods.forEach(id => { // 遍历选中的商品ID
const good = this.goodList.find(item => item.id.toString() === id); // 查找对应的商品
if (good) { // 如果商品存在
total += good.price * good.count; // 累加商品的总价
}
});
return total; // 返回总价格
}
}
在这个示例中，我们使用了Checkbox组件来表示每个商品的选中状态，并使用CheckboxGroup组件来实现商品的全选和反选功能。当用户点击全选Checkbox时，CheckboxGroup会触发onChange事件，我们可以通过该事件处理函数来获取当前选中的商品ID，并据此计算购物车中的总价格。
