自定义单选框组件

封装前的代码：

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() {
              Radio({ value: item + '1', group: 'group1' })
                .checked(this.setSele[index])
                .onChange((value: boolean) => {
                  console.log(String(value))
                  this.setSele[index] = value
                  // promptAction.showToast({ message: '我是:' + item + ' ' + index }) //点击处报告
                })

              Text(item)
                .focusable(false)
                .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 }) { //----------
      ForEach(this.suzu, (item: string, index: number) => {
        ListItem() {
            mydiyRadio({ item: item, setSele: this.setSele, index: index })
        }
      })

    } //------------
    .height(30)
    .width(200)
    .alignItems(HorizontalAlign.Start)
  }
}

//=============自定义单选框组件,源码来自 wb98.com
@Component
struct mydiyRadio {
  item: string = ''
  @State setSele: boolean[] = []
  index: number = 0

  build() {
    Row() {

      Radio({ value: 'radio1', group: 'group2' })
        .checked(this.setSele[this.index])
        .onChange((value: boolean) => {
          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://www.wb98.com/post/385.html