HarmonyOS鸿蒙Next中Radio组件通过ContentModifier实现自定义样式后如何实现单选

HarmonyOS鸿蒙Next中Radio组件通过ContentModifier实现自定义样式后如何实现单选

【问题现象】

实现Radio的自定义样式，Radio变成复选框了无法实现单选。

图片

【背景知识】

使用了contentModifier，在当前组件上，定制内容区的方法需要自定义实现。modifier：内容修改器，需要自定义class实现ContentModifier接口。

【定位思路】

目前Radio组件添加了contentModifier后，两个Radio处于同一组，只能实现复选效果，没有半自动的实现，无法实现不改变Radio效果，但是可以改变Radio样式。

【解决方案】

目前Radio组件添加了contentModifier后，所定的规格是：所有效果都要依靠应用自己实现。在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() {
    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](/user/State) message: string = 'Hello World';
  [@State](/user/State) radio1checked: boolean = true
  [@State](/user/State) radio2checked: boolean = false
  [@State](/user/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%')
  }
}

【总结】

受规格限制，使用了contentModifier所有效果都需要应用自己实现，例如单选等效果。


更多关于HarmonyOS鸿蒙Next中Radio组件通过ContentModifier实现自定义样式后如何实现单选的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中Radio组件通过ContentModifier实现自定义样式后如何实现单选的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，使用contentModifier自定义Radio组件样式后，可以通过为每个Radio的checked属性绑定@State值，并在onChange事件中更新该值来实现单选功能。具体实现如下：

  1. 定义DiRadio类实现ContentModifier接口，用于自定义Radio样式。
  2. 在Index组件中，为每个Radio绑定@State变量，如radio1checked、radio2checked、radio3checked。
  3. 在Radio的onChange事件中，更新对应的@State变量，并确保其他Radio的checked状态为false。

示例代码：

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

@Builder
function buildDiRadio(config: RadioConfiguration) {
  Column() {
    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
            this.radio2checked = false
            this.radio3checked = false
            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
            this.radio1checked = false
            this.radio3checked = false
            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
            this.radio1checked = false
            this.radio2checked = false
            console.info('Radio3 status is ' + isChecked)
          })
      }
    }
    .height('100%')
    .width('100%')
  }
}

通过上述方式，可以在自定义样式的基础上实现Radio的单选功能。

回到顶部