HarmonyOS 鸿蒙Next 自定义样式单选（Radio），在更换选项后子组件的位置变动

发布于 1周前 作者 bupafengyu 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 自定义样式单选（Radio），在更换选项后子组件的位置变动

通过Radio组件的contentModifier实现的自定义样式单选答题，为选中的选项变背景色和字体颜色，在选中一个选项后，更换选项时，视觉上会感觉UI上下移动，经实测，选项的y坐标变动了，但是组件大小、边距等等都没有变动，可能的原因是啥？

由于不能确定选项的字数，所以无法固定子组件的height属性，选项通过Foreach循环渲染（选项的个数也不确定），使用colunm组件纵向排列，column外层还有一层Scroll组件

Radio样式如下：

cke_4128.png


更多关于HarmonyOS 鸿蒙Next 自定义样式单选（Radio），在更换选项后子组件的位置变动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
5 回复

在Radio组件外包裹一层Row即可避免该问题，不要让多个Radio直接作为兄弟组件。如下：

Column({ space: 10 }) {
  ForEach(this.list, (str: string, index) => {
    Row() {
      Radio({ value: `Radio${index}`, group: 'radioGroup' })
        .contentModifier(new MyRadioStyle(str))
    }
  })
}
.alignItems(HorizontalAlign.Start)
.padding(10)
.width('100%')

更多关于HarmonyOS 鸿蒙Next 自定义样式单选（Radio），在更换选项后子组件的位置变动的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


应该是底层组件Radio的实现有特殊布局导致的，具体实现需要看源码了，

感谢大佬，解决了！！，

图片

写了个最简单的demo验证了一下，确实有这个问题，选择时选项间的间距变了，可能是bug？

class MyRadioStyle implements ContentModifier<RadioConfiguration> {
  content: string = ''
  constructor(content: string) {
    this.content = content
  }
  applyContent(): WrappedBuilder<[RadioConfiguration]> {
    return wrapBuilder(buildRadio)
  }
}

@Builder
function buildRadio(config: RadioConfiguration) {
  Row(){
    Text((config.contentModifier as MyRadioStyle).content)
      .backgroundColor(config.checked ? Color.Red : '#eeeeff')
      .fontColor(config.checked ? Color.White : Color.Black)
      .onClick(() => {
        if (config.checked) {
          config.triggerChange(false)
        } else {
          config.triggerChange(true)
        }
      })
  }.width('100%')
}

@Entry
@Component
struct RadioExample {
  @State list: string[] = [
    'A. 测试选项A测试选项A测试选项A测试选项A测试选项A测试选项A测试选项A测试选项A测试选项A测试选项A测试选项A测试选项A',
    'B. 测试选项B测试选项B测试选项B测试选项B测试选项B',
    'C. 测试选项C'
  ]

  build() {
    Column({space: 10}) {
      ForEach(this.list, (str: string, index) => {
        Radio({ value: `Radio${index}`, group: 'radioGroup' })
          .contentModifier(new MyRadioStyle(str))
      })
    }
    .padding(10)
    .width('100%')
  }
}

在HarmonyOS 鸿蒙Next中，自定义样式单选按钮（Radio）在更换选项后子组件位置变动的问题，通常与布局管理和组件状态更新有关。这可能是由于单选按钮的状态变化触发了布局重新计算，导致子组件位置调整。

解决此类问题，你可以检查以下几个方面：

  1. 布局文件：确保布局文件中单选按钮及其子组件的约束设置正确，避免使用可能因状态变化而导致位置变动的布局属性。

  2. 组件状态管理：检查单选按钮状态变化时，是否正确地更新了相关子组件的属性或状态，避免不必要的布局重绘。

  3. 动画与过渡效果：如果使用了动画或过渡效果，确保它们在单选按钮状态变化时不会导致布局混乱。

  4. 自定义样式：检查自定义样式中是否有影响布局的属性，如margin、padding等，在状态变化时是否保持一致。

  5. 日志调试：通过日志输出单选按钮状态变化前后的布局信息，对比差异，定位问题所在。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html

回到顶部