HarmonyOS 鸿蒙Next 全选反选demo

HarmonyOS 鸿蒙Next 全选反选demo 希望有大佬提供个demo

2 回复

参考：

@State status_1: boolean = true
@State status_2: boolean = false
@State selectArr: string[] = []

Row() {
        CheckboxGroup({ group: 'myCheck' })
          .onChange((event: CheckboxGroupResult) => {
            this.selectArr = event.name;
            console.log(this.selectArr.toString());
          })
        Text('全选')
        Checkbox()
          .onChange((value) => {
            this.status_1 = !this.status_1
            this.status_2 = !this.status_2
          })
        Text('反选')
      }


      Row() {
        Checkbox({ name: 'checkbox1', group: 'myCheck' }) {
          Text('checkbox1')
        }
        .select(this.status_1)
        .onChange((value: boolean) => {
          this.status_1 = value;
        })
      }

      Row() {
        Checkbox({ name: 'checkbox2', group: 'myCheck' }) {
          Text('checkbox2')
        }
        .select(this.status_2)
        .onChange((value: boolean) => {
          this.status_2 = value;
        })
      }

更多关于HarmonyOS 鸿蒙Next 全选反选demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对帖子标题“HarmonyOS 鸿蒙Next 全选反选demo”的问题，以下是一个简洁且专业的回答：

在HarmonyOS鸿蒙Next系统中实现全选与反选功能，通常涉及UI组件的状态管理与事件处理。以下是一个基本的实现思路：

  1. UI布局：使用ArkUI（基于TS/JS的UI框架）或ETS（基于Dart的声明式UI框架）设计界面，包含复选框列表和一个全选/反选按钮。

  2. 数据绑定：为复选框列表中的每个选项绑定一个数据模型，该模型包含一个布尔值来表示选中状态。同时，为全选按钮也绑定一个布尔值，用于控制所有选项的选中状态。

  3. 事件处理：

    • 当全选按钮被点击时，遍历复选框列表，将所有选项的选中状态设置为与全选按钮一致。
    • 当单个复选框被点击时，检查所有复选框的选中状态。如果所有选项都被选中，则将全选按钮设置为选中状态；如果有任何选项未被选中，则将全选按钮设置为未选中状态。

  4. 更新UI：根据数据模型的变化，ArkUI或ETS会自动更新UI界面，显示最新的选中状态。

如果问题依旧没法解决请联系官网客服，官网地址是： https://www.itying.com/category-93-b0.html，

回到顶部