HarmonyOS Radio组件通过ContentModifier实现自定义样式后无法实现单选

代码如下:

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

@Builder function buildDiRadio(config: RadioConfiguration) {
  Image(config.checked?$r('app.media.common_radio_picked_svg'):$r('app.media.common_radio_notpicked_svg'))
    .width(24).height(24)
    .onClick(()=>{
      if (config.checked) {
        config.triggerChange(false)
      } else {
        config.triggerChange(true)
      }
    })
}
Column() {
  Text('Radio1')
  Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
    .contentModifier(new DiRadio())
    .onChange((isChecked: boolean) => {
      console.info('Radio1 status is ' + isChecked)
    })
}
Column() {
  Text('Radio2')
  Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
    .contentModifier(new DiRadio())
    .onChange((isChecked: boolean) => {
      console.info('Radio2 status is ' + isChecked)
    })
}
Column() {
  Text('Radio3')
  Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
    .contentModifier(new DiRadio())
    .onChange((isChecked: boolean) => {
      console.info('Radio3 status is ' + isChecked)
    })
}

现象是三个radio变成复选框了。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

目前在contentModifier的基础上,可以给每个Radio的checked属性添加一个@State绑定的值,在Radio的onChange事件中给该值赋值,来触发Radio的ui更新参考示例:

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.background') : $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%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS Radio设置自定义单选样式
44浏览 • 1回复 待解决
HarmonyOS Slider无法自定义滑轨样式
14浏览 • 1回复 待解决
鸿蒙组件toast自定义样式
8892浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
470浏览 • 1回复 待解决
HarmonyOS CoverFlow效果自定义组件实现
305浏览 • 1回复 待解决
组件自定义回调函数实现
466浏览 • 1回复 待解决
如何实现一个自定义样式的toast提示
2004浏览 • 1回复 待解决
HarmonyOS自定义组件增加方法如何实现
416浏览 • 1回复 待解决
HarmonyOS 自定义Slider样式
385浏览 • 1回复 待解决
HarmonyOS 自定义控件实现
32浏览 • 1回复 待解决
swiper组件如何实现自定义切换动画
781浏览 • 1回复 待解决
如何自定义Video组件控制栏样式
2482浏览 • 1回复 待解决