HarmonyOS Radio如何更改选中样式图片？

Question

如何更改选中的样式。我看api中没有支持更改样式呢，有什么办法吗？

Answer 1

Radio暂不支持自定义图片。间接实现单选，且支持修改图片样式：

class DiRadio implements ContentModifier<RadioConfiguration> {
  applyContent(): WrappedBuilder<[RadioConfiguration]> {
    return wrapBuilder(buildDiRadio)
  }
}

@Builder
function buildDiRadio(config: RadioConfiguration) {
  Column() {
    Text(config.checked + '')
    Image(config.checked ? $r('app.media.icon') : $r('app.media.app_icon')).width(24).height(24).onClick(() => {
      if (config.checked) {
        config.triggerChange(false)
      } else {
        config.triggerChange(true)
      }
    })
  }
}

@Entry
@Component
struct Index {
  @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%')
  }
}