HarmonyOS 鸿蒙Next 自定义单选框Radio选中后布局变化原因

自定义单选框Radio，为什么选中之后，布局就发生变化，见截图

选中前

选中后， 会比其他选项高

export class MyRadioStyle implements ContentModifier<RadioConfiguration> {
item: string = ‘’;

constructor(itemStr: string) {
this.item = itemStr
}
applyContent(): WrappedBuilder<[RadioConfiguration]> {
return wrapBuilder(buildRadio)
}
}
@Builder
function buildRadio(config: RadioConfiguration) {
Button((config.contentModifier as MyRadioStyle).item)
.controlSize(ControlSize.SMALL)
.opacity(config.checked ? 1 : 0.4)
.onClick(() => {
if (config.checked) {
config.triggerChange(false)
} else {
config.triggerChange(true)
}
})
}
@Entry
@Component
struct refreshExample {
private list: string[] =
[‘选项1’, ‘选项2’, ‘选项3’, ‘选项4’];
build() {
Column({ space: 50 }) {
Flex({
direction: FlexDirection.Row,
wrap: FlexWrap.Wrap,
alignItems: ItemAlign.Start,
justifyContent: FlexAlign.Start
}) {
ForEach(this.list, (item: string, index: number) => {
Radio({ value: ‘styleRadio’ + index, group: ‘styleRadioGroup’ })
.contentModifier(new MyRadioStyle(item))
.checked(false)
}, (item: string) => item)
}
}
}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>