HarmonyOS NEXT鸿蒙开发:Checkbox多选框-根据数组动态生成复选框

ForEach循环渲染

详见链接:
https://www.malaoshi.top/show_1GW570S1SaU.html

代码

// 定义数据类型
interface Option {
  label: string;
  checked: boolean;
};

@Entry
@Component
struct Index {
  // 定义爱好数组
  @State aihao: Option[] = [
    { label: '王者荣耀', checked: false },
    { label: '吃鸡', checked: false },
    { label: '抖音', checked: false }
  ];
  build() {
    Column() {
      Row(){
        Text("爱好:")
      }
      .width("100%")

      ForEach(this.aihao, (item:Option,index:number) => {
        Row(){
          Checkbox()
            .select(item.checked) // 此时不能用双向绑定
            .onChange( value => {
              item.checked = value // 改变勾选状态时复制
            })
          Text(item.label)
        }
        .width("100%")
      })


      Button("获取值")
        .onClick( ()=>{
          for(let item of this.aihao){
            console.log("", JSON.stringify(item) )
          }

        })

    }
  }
}

原文出处:/show_1GW1yBYMUHPm.html