HarmonyOS 鸿蒙Next 用List循环创建checkbox，如何监听每一个checkbox的状态呢

发布于 1周前 作者 songsunli 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 用List循环创建checkbox，如何监听每一个checkbox的状态呢

附上代码

class ClassSetting {
  public Name:  boolean;
  public Value: string;

  constructor(Name: boolean, Value: string) {
    this.Name = Name;
    this.Value = Value;
  }
}

@State xSetting: ClassSetting[] = [
  new ClassSetting(true,"实时发送速率"),
  new ClassSetting(true, '实时接收速率'),
];

List({ space: 0, initialIndex: 0 }) {
  ForEach(this.xSetting, (item: ClassSetting) => {
    ListItem() {
      Flex() {
        Checkbox({ name: item.Name.toString()})
          .selectedColor('#00BFA5')
          .shape(CheckBoxShape.ROUNDED_SQUARE)
          .unselectedColor('#00BFA5')
          .select(item.Name)
          .onChange((value: boolean) => {
            if('XXX'== item.Value ){
              console.log("111111111"+item.Value)
              item.Value = '1'
            }
          })
          .width(18)
          .height(18)
        Text(item.Value).fontSize(15).fontColor(Color.White).margin({top:5})
      }
    }
  }, (item: ClassSetting) =>  JSON.stringify(item))
}
Harmonyos Next教程
4 回复 
item.Name = value
console.info(`item.Value:${item.Value}`)
console.info(`item.Name:${item.Name}`)
console.info(`index:${index}`)

完整示例

class ClassSetting {
  public Name: boolean;
  public Value: string;

  constructor(Name: boolean, Value: string) {
    this.Name = Name;
    this.Value = Value;
  }
}

@Entry
@Component
struct Page46 {
  @State xSetting: ClassSetting[] = [
    new ClassSetting(true, "实时发送速率"),
    new ClassSetting(true, '实时接收速率'),
  ];

  build() {

    Column() {
      List({ space: 0, initialIndex: 0 }) {
        ForEach(this.xSetting, (item: ClassSetting, index: number) => {
          ListItem() {
            Flex() {
              Checkbox({ name: item.Name.toString() })
                .selectedColor('#00BFA5')
                .shape(CheckBoxShape.ROUNDED_SQUARE)
                .unselectedColor('#00BFA5')
                .select(item.Name)
                .onChange((value: boolean) => {
                  item.Name = value
                  console.info(`item.Value:${item.Value}`)
                  console.info(`item.Name:${item.Name}`)
                  console.info(`index:${index}`)
                  if ('XXX' == item.Value) {
                    console.log("111111111" + item.Value)
                    item.Value = '1'
                  }
                })
                .width(18)
                .height(18)
              Text(item.Value).fontSize(15).fontColor(Color.White).margin({ top: 5 })
            }
          }
        }, (item: ClassSetting) => JSON.stringify(item))
      }
    }.width('100%').height('100%')
  }
}

还想请教一个问题，如果我要把我选中的所有值返回出去该如何写呀，我将创建checkbox的方法写在了@Builder自定义函数中，因为我很多地方需要用list创建checkbox，只是集合不一样，我现在想返回我选中的值，却不知道如何操作了

刚刚打错了，应该是eventHub 基本使用参考：https://developer.huawei.com/consumer/cn/blog/topic/03152965010875041h±/$%-+弹窗封装时@builder时，通过生成id，好用eventHub发送到指定位置 参考：https://developer.huawei.com/consumer/cn/forum/topic/0202156174901893142?fid=0109140870620153026

在HarmonyOS鸿蒙Next系统中，使用List循环创建Checkbox时，监听每一个Checkbox的状态可以通过为每个Checkbox设置单独的监听器来实现。以下是一个基本的实现思路：

  1. 创建Checkbox列表：首先，通过List循环动态创建Checkbox组件，并添加到布局中。

  2. 设置监听器：在创建每个Checkbox的同时，为其设置一个独立的点击监听器（例如Checkbox.setCheckedChangeListener）。

  3. 处理状态变化：在监听器的回调方法中，根据Checkbox的ID或索引来识别具体是哪个Checkbox的状态发生了变化，并处理相应的逻辑。

示例代码片段（伪代码）：

for (int i = 0; i < listSize; i++) {
    Checkbox checkbox = new Checkbox(context);
    checkbox.setId(View.generateViewId()); // 为每个Checkbox设置唯一ID
    checkbox.setCheckedChangeListener((buttonView, isChecked) -> {
        if (isChecked) {
            // 处理选中状态
        } else {
            // 处理未选中状态
        }
        // 可以通过buttonView.getId()来识别具体是哪个Checkbox
    });
    // 将checkbox添加到布局中
}

这种方法确保每个Checkbox的状态变化都能被独立监听和处理。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部