本文中 我们来说 通用组件中的 Checkbox
我们先搭起一个基本的架子组件
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Row() {
}
}
.width('100%')
}
.height('100%')
}
}
我们可以在Row 行组件中加入代码
Checkbox({
name: "age"})
Text("年龄")
这样 就做出了一个 选择框 和一个 文本的效果
我们可以点击勾选 和 取消勾选
然后 我们可以监听它的状态改变
我们这样写
Checkbox({
name: "age"}).onChange((value) => {
console.log("状态value"+value);
})
Text("年龄")
此时 我们勾选/取消勾选 都会触发 onChange
这个方法接受一个参数 记录选择状态 true 选中 false 取消选中
在实际开发中 我们可以通过这种方式记录
@Entry
@Component
struct Index {
@State Arr:Array<string> = [];
build() {
Row() {
Column() {
ForEach(
this.Arr,
(item)=>{
Text(item)
}
)
Row() {
Checkbox({
name: "health"}).onChange((value) => {
if(value) {
this.Arr.push("健康")
}else{
this.Arr = this.Arr.filter(item => item !== "健康");
}
})
Text("健康")
Checkbox({
name: "longevity"}).onChange((value) => {
if(value) {
this.Arr.push("长寿")
}else{
this.Arr = this.Arr.filter(item => item !== "长寿");
}
})
Text("长寿")
}
}
.width('100%')
}
.height('100%')
}
}
我们设置了两个Checkbox组件 然后 监听他们的 onChange
通过value判断 是否选中 或者 取消选择
如果是选中 将 内容 push到数组中 否则 从数组中过滤出去
最上面 用 ForEach 循环渲染了数组内容
这样 我们选择 就会将内容加入数组中
被我们取消的内容 就会从数组中移除
然后 我们还可以做一个分组
我们这样写
@Entry
@Component
struct Index {
build() {
Row() {
Column() {
Row() {
CheckboxGroup({
group: "hobby" })
Text("全选")
}
Row() {
Checkbox({
group: "hobby" })
Text("电子游戏")
}
Row() {
Checkbox({
group: "hobby" })
Text("运动")
}
Row() {
Checkbox({
group: "hobby" })
Text("健身")
}
}
.width('100%')
}
.height('100%')
}
}
CheckboxGroup 会声明出一个组 且 它是作为全选按钮出现在页面上的
然后 group属性 用来声明组名
所有 组名 group属性与它相同的 Checkbox组件 都会被分组到它下面
效果就是 我们点击全选 他们就会全部选中
我们取消全选 他们就会全部取消
然后 我们全部 取消 全选 也会自动取消