[文章]利用OpenHarmony实现单选组效果的过程

单选组效果：


在OpenHarmony应用开发中，我们可以使用多个Toggle组件来实现。
来看看我们想要的一个效果吧。


现在先定义出一个新的组件RadioGroup。
@Component
struct RadioGroup {
   build(){}   
}
数据
要实现一个单选组组件，首先要知道我们需要什么。
单选项
一个单选项应该由两种数据构成。
单选项的对应值
单选项要显示文字。
那么我们先定义一个接口叫Option。
interface Option {
    displayValue: string,    //显示文字
    value: string | number  //对应值
}
单选组
一个单选组一定是由多个单选项组成的。那么RadioGroup组件一定是需要获取一个单选项数组Option[]。
private list: Option[]  //一个Option数组
单选组值
对于一个单选组，永远会是有值的，因为总有一个选项是被选中的。
单选组值我们进行双向绑定。
@Link value: string | number //类型与Option的value保持一致
如果没有给定单选组值，那么默认单选组值为第一个选项的对应值。
aboutToAppear() {
    if (!this.value) {
        this.value = this.list[0].value
    }
}

但是现在每个Toggle组件控制都是独立的。

状态管理
我们知道Toggle组件是靠isOn的值来渲染自己当前的状态，现在我们为单选组建立一个状态管理数组
@State _state: boolean[] = [] //状态管理数组
现在按照索引为每个选项组件建立好自己的状态数据。
选项默认状态为关闭false
单选组值对应的选项状态为开启true
if (!this.value) {
    this.value = this.list[0].value
}
this.list.forEach((option, index) => {
    let state = false
    if (option.value == this.value) { //单选组值对应选项
      state = true
    }
    this._state[index] = state

})

当我们每次修改单选组值value后，应该刷新状态管理数组_state。

我们定义一个刷新状态的方法refresh。
private refresh(){
    this.list.forEach((option, index) => {
        let state = false
        if (option.value == this.value) {
          state = true
        }
        this._state[index] = state
    })
}
Toggle组件每次切换状态会执行onChange方法。
当我们发现组件发生变化时，就去更新单选组值，并刷新整个状态数组。
ForEach(this.list, (option: Option, index: number) => {
    Toggle({
      type: ToggleType.Button,
      isOn: this._state[index]
    })
    .onChange((isOn: boolean) => {
        this.value = option.value
        this.refresh()
    })
})
现在还差最重要的一步，就是保证选中的单选项再次被点击后不会切换状态。
这里就要用到enabled属性了，只要我们发现这个选项被选中就让这个选项不可响应。
ForEach(this.list, (option: Option, index: number) => {
    Toggle({
      type: ToggleType.Button,
      isOn: this._state[index]
    })
    .enabled(!this._state[index]) //是否响应状态 正好与 是否选中状态值相反
})
自定义选项
虽然实现了一个单选组组件，但是我们发现每个选项的样式都被固定在RadioGroup组件内，我们如果想修改样式就必须修改RadioGroup组件。那么有没有什么办法，可以让我们使用单选组逻辑的同时又能够自定义Toggle组件的样式呢。
这里要感谢社区小伙伴提供的ets插槽思路，使用ForEach配合@Builder装饰器来实现。
选项构造器
首先我们为RadioGroup组件添加一个选项构造器itemBuilder。
type Update = () => void
type ItemBuilder = (item: Option, index: number, state: boolean, update: Update) => void
struct RadioGroup {
private itemBuilder: ItemBuilder
...
}
这个构造器会为父级组件提供RadioGroup选项信息。
item: Option 当前选项信息
index:number 当前选项索引
state:boolean 当前选项状态
update:Update 刷新RadioGroup状态方法
有了构造器，我们就可以利用构造器返回的信息渲染单个选项。
我们来看看构造器是如何使用的。
@Builder装饰器定义了一个如何渲染自定义组件的方法。此装饰器提供了一个修饰方法，其目的是和build函数一致。
@Builder装饰器装饰的方法的语法规范与build函数也保持一致。
通过@Builder装饰器可以在一个自定义组件内快速生成多个布局内容。
@Entry
@Component
struct Index {
  @State value: string = ''
  // 渲染选项
  @builder OptionItem(option: Option, index: number, state: boolean, update: Update) {
    Toggle({
      type: ToggleType.Button,
      isOn: state  //Toggle组件状态
    }) {
      // 选项显示文字
      Text(`${option.displayValue}`).fontSize(24).fontColor(Color.White)
    }
    .onChange((isOn)=>{
      // 发生变化时，执行刷新方法
        update()
    })
    .enabled(!state)  //Toggle组件可响应状态
    .selectedColor(Color.Blue)
    .size({
      width: 150,
      height: 80
    })
  }
  build() {
    Column() {
      RadioGroup({
        value: $value, // 单选组值是双向绑定的
        list: this.list,
        itemBuilder: (option: Option, index: number, state: boolean, update: Update) => {
          // 在itemBuilder内调用@Builder装饰器方法
            this.OptionItem(option, index, state, update)
        }
      })
    }
    .height('100%')
    .width('100%')
  }
}
实现构造器
那么这个构造器怎么实现呢？
我们要知道build方法内仅支持：
组合组件
使用渲染控制语法
调用@Builder装饰的方法
要让itemBuilder构造器方法在build中被调用，我们就需要让itemBuilder成为一个组件。
这就要提起我们的ForEach循环渲染了。
当我们使用ForEach只执行一次循环时，就相当于是一个组件在被渲染。那么只要我们将itemBuilder构造器方法重新定义在ForEach生成子组件的lambda函数上，就可以让itemBuilder构造器成为一个可以被渲染的组件了。
bind()函数创建了一个新函数（原函数的拷贝），这个函数接受一个提供新的this上下文的参数，以及之后任意可选的其他参数。当这个新函数被调用时，它的this关键字指向第一个参数的新上下文。而第二个之后的参数会与原函数的参数组成新参数（原函数的参数在后），传递给函数。
另外使用call()、apply()都是可以的，我们要的就是重新定义ForEach的生成子组件方法。
private _once = Array(1)
@Builder RadioGroupItem(option: Option, index: number) {
    ForEach(this._once, this.itemBuilder.bind(this, option, index, this._state[index], () => {
        this.value = option.value
        this.refresh()
    }))
}
选项组件
build() {
    Flex({
wrap: FlexWrap.Wrap
    }) {
        ForEach(this.list, (option: Option, index: number) => {
        this.RadioGroupItem(option, index)
        })
    }
}
完整代码
ui/RadioGroup.ets
export interface Option {
  displayValue: string,
  value: string | number
}
export type Update = () => void
export type ItemBuilder = (item: Option, index: number, state: boolean, update: Update) => void
// 单选组
@Component
export struct RadioGroup {
  private list: Option[]
  private itemBuilder: ItemBuilder
  @State _state: boolean[] = []
  @Link value: string | number
  private _once: number[]
  private refresh() {
    this.list.forEach((option, index) => {
      let state = false
      if (option.value == this.value) {
        state = true
      }
      this._state[index] = state
    })
  }
  aboutToAppear() {
    this._once = [1]
    if (!this.value) {
      this.value = this.list[0].value
    }
    this.refresh()
  }
  @Builder RadioGroupItem(option: Option, index: number) {
    ForEach(this._once, this.itemBuilder.bind(this, option, index, this._state[index], () => {
      this.value = option.value
      this.refresh()
    }))
  }
  build() {
    Flex({
      wrap: FlexWrap.Wrap
    }) {
      ForEach(this.list, (option: Option, index: number) => {
        this.RadioGroupItem(option, index)
      })
    }
  }
}
index.ets
import {Option, RadioGroup, Update} from '../ui/RadioGroup.ets';
@Entry
@Component
struct Index {
  @State value: string = ''
  private list: Option[] = [
    {
      displayValue: "这是选项A",
      value: "A"
    },
    {
      displayValue: "这是选项B",
      value: "B"
    },
    {
      displayValue: "这是选项C",
      value: "C"
    },
    {
      displayValue: "这是选项D",
      value: "D"
    }
  ]
  @Builder OptionItem(option: Option, index: number, state: boolean, update: Update) {
    Flex({
      alignItems: ItemAlign.Center,
      justifyContent: FlexAlign.Center
    }) {
      Toggle({
        type: ToggleType.Button,
        isOn: state
      }) {
        Text(`${option.displayValue}`).flexGrow(1).fontSize(24).fontColor(Color.White)
      }
      .onChange((isOn) => {
        update()
      })
      .enabled(!state)
      .selectedColor(Color.Blue)
      .borderRadius(150)
      .size({
        width: 150,
        height: 80
      })
    }
    .width('25%')
    .margin({
      top: 10,
      bottom: 10
    })
  }
  build() {
    Column() {
      RadioGroup({
        value: $value,
        list: this.list,
        itemBuilder: (option: Option, index: number, state: boolean, update: Update) => {
          this.OptionItem(option, index, state, update)
        }
      })
      Column() {
        Text(`您选择了${this.value}`).fontSize(30)
      }.margin(40)
    }
    .height('100%')
    .width('100%')
  }
}

这是我自己的一个思路，自定义组件在实际应用开发中应该要考虑到更多的情况，大家有更好的思路或者实现方式希望可以在社区里一起交流。