自定义的多选框组件

自己做了一个多选框组件，没有封装前的代码：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Page2 {
  suzu: string[] = ['中国', '美国', '英国', '法国', '俄罗斯']
  @State setSele: Array<boolean> = new Array(this.suzu.length).fill(false) //用这个数组变量来控制选择框组件的勾选状态

  build() {
    Column({ space: 10 }) { //----------wb98.com
      ForEach(this.suzu, (item: string, index: number) => {
        ListItem() {

          Column() {

            Row() {
              Checkbox({ name: item + '1', group: 'group1' })
                .shape(CheckBoxShape.ROUNDED_SQUARE)
                .select(this.setSele[index])
                .onChange((value: boolean) => {
                  console.log(String(value))
                  this.setSele[index] = value
                //  promptAction.showToast({ message: '我是:' + item + ' ' + index }) //点击处报告
                })

              Text(item)
                .focusable(false)
                // .backgroundColor(this.color1[index])
                .onClick(() => {
                  promptAction.showToast({ message: '我是:' + item + ' ' + index }) //点击处报告
                  for (let i = 0; i < this.setSele.length; i++) { //设置问题转为处理数组问题，所以必须先定义一个跟源大小相一致的数组
                    if (i == index) { //设置多选框
                      this.setSele[i] = !this.setSele[i]
                    } else {
                      // this.setSele[i] = false //单选框组件才需要这句代码
                    }
                  }
                })


            }
            .height(30)
            .width(200)

          }
        }
      })

    } //------------
  }
}

封装后的代码：

import { promptAction } from '@kit.ArkUI'

@Entry
@Component
struct Page2 {
  suzu: string[] = ['中国', '美国', '英国', '法国', '俄罗斯']
  @State setSele: Array<boolean> = new Array(this.suzu.length).fill(false) //用这个数组变量来控制选择框组件的勾选状态

  build() {
    Column({ space: 10 }) { //----------wb98.com
      ForEach(this.suzu, (item: string, index: number) => {
        ListItem() {

          Column() {
            mydiyCheck({ item: item, setSele: this.setSele, index: index }) //调用自定义多选框组件
          }
          .height(30)
          .width(200)
          .alignItems(HorizontalAlign.Start)
        }
      })

    } //------------
  }
}

//================自定义多选框组件

@Component
struct mydiyCheck {
  item: string = ''
  @State setSele: boolean[] = []
  index: number = 0

  build() {
    Row() {
      Checkbox({ name: this.item + '2', group: 'group2' })
        .focusable(false)
        .shape(CheckBoxShape.ROUNDED_SQUARE)
        .select(this.setSele[this.index])
        .onChange((value: boolean) => {
          console.log(String(value))

          this.setSele[this.index] = value

          // promptAction.showToast({ message: '选中的是:' + this.item + ' ' + this.index }) //获取，如何设置？
        })

      Text(this.item)
        .focusable(false)// .backgroundColor(this.color1[index])
        .onClick(() => {
          // promptAction.showToast({ message: '新是:' + this.item + ' ' + this.index })
          for (let i = 0; i < this.setSele.length; i++) { //设置问题转为处理数组问题，所以必须先定义一个跟源大小相一致的数组
            if (i == this.index) { //设置多选框
              this.setSele[i] = !this.setSele[i]
            } else {
              // this.setSele[i] = false
            }
          }
        })
    }
  }
}

打赏 支付宝打赏 微信打赏

来源：济亨网

本文链接：https://wb98.com/post/384.html