问题现象
当Radio设置通过ContentModifier设置自定义内容后，Radio无法实现单选功能。
问题代码如下：
class DiRadio implements ContentModifier<RadioConfiguration> {
applyContent(): WrappedBuilder<[RadioConfiguration]> {
return wrapBuilder(buildDiRadio);
}
}
@Builder
function buildDiRadio(config: RadioConfiguration) {
Column() {
Image(config.checked ? $r('app.media.checked_true') : $r('app.media.checked_false'))
.width(24).height(24)
};
}
@Entry
@Component
struct CustomRadio {
build() {
Column({ space: 15 }) {
Column({ space: 5 }) {
Text('Radio1');
Radio({ value: 'Radio1', group: 'radioGroup' }).contentModifier(new DiRadio());
};
Column({ space: 5 }) {
Text('Radio2');
Radio({ value: 'Radio2', group: 'radioGroup' }).contentModifier(new DiRadio());
};
Column({ space: 5 }) {
Text('Radio3');
Radio({ value: 'Radio3', group: 'radioGroup' }).contentModifier(new DiRadio());
};
}
.height('100%')
.width('100%');
}
} 问题效果预览:
背景知识
- ContentModifier接口：内容修改器，提供自定义绘制组件内容区的能力。
- Radio：单选框，提供相应的用户交互选择项。contentModifier，在Radio组件上，定制内容区的方法。modifier，内容修改器，开发者需要自定义class实现ContentModifier接口。当modifier的值为undefined时，不使用内容修改器。
修改建议
在ContentModifier的基础上，给自定义内容添加点击事件。当checked的值为false时，通过triggerChange方法修改当前Radio的checked值为true（同group的其他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.startIcon') : $r('app.media.background'))
.width(24).height(24)
.onClick(() => {
if (!config.checked) {
config.triggerChange(true);
}
});
};
}
@Entry
@Component
struct CustomRadio {
build() {
Column({ space: 15 }) {
Column({ space: 5 }) {
Text('Radio1');
Radio({ value: 'Radio1', group: 'radioGroup' }).contentModifier(new DiRadio());
};
Column({ space: 5 }) {
Text('Radio2');
Radio({ value: 'Radio2', group: 'radioGroup' }).contentModifier(new DiRadio());
};
Column({ space: 5 }) {
Text('Radio3');
Radio({ value: 'Radio3', group: 'radioGroup' }).contentModifier(new DiRadio());
};
}
.height('100%')
.width('100%');
}
}