【安卓开发学习鸿蒙9】Radio组件通过ContentModifier实现自定义样式后如何实现单选

class DiRadio implements ContentModifier<RadioConfiguration> {
  applyContent(): WrappedBuilder<[RadioConfiguration]> {
    return wrapBuilder(buildDiRadio)
  }
}
@Builder
function buildDiRadio(config: RadioConfiguration) {
  Column() {
    Image(config.checked ? $r('app.media.checkmark_circle2') : $r('app.media.checkmark_circle'))
      .width(24).height(24)
      .onClick(() => {
        if (config.checked) {
          config.triggerChange(false)
        } else {
          config.triggerChange(true)
        }
      })
  }
}
@Entry
@Component
struct Radioapage {
  @State message: string = 'Hello World';
  @State radio1checked: boolean = true
  @State radio2checked: boolean = false
  @State radio3checked: boolean = false

  build() {
    Column() {
      Column() {
        Text('Radio1')
        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(this.radio1checked)
          .contentModifier(new DiRadio())
          .onChange((isChecked: boolean) => {
            this.radio1checked = isChecked
            console.info('Radio1 status is ' + isChecked)
          })
      }

      Column() {
        Text('Radio2')
        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(this.radio2checked)
          .contentModifier(new DiRadio())
          .onChange((isChecked: boolean) => {
            this.radio2checked = isChecked
            console.info('Radio2 status is ' + isChecked)
          })
      }

      Column() {
        Text('Radio3')
        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(this.radio3checked)
          .contentModifier(new DiRadio())
          .onChange((isChecked: boolean) => {
            this.radio3checked = isChecked
            console.info('Radio3 status is ' + isChecked)
          })
      }
    }
    .height('100%')
    .width('100%')
  }
}