HarmonyOS 鸿蒙Next Radio如何更改选中样式图片
HarmonyOS 鸿蒙Next Radio如何更改选中样式图片
我们的视觉中单选的样式与Radio的样式不同,所以想咨询一下如何更改选中的样式。我看api中没有支持更改样式呢,有什么办法吗?网友说使用Stack包一下,但是也只能设置backgroundImage,效果不是很好。
2 回复
Radio应该是不支持自定义图片
可以试下这样contentModifier
class DiRadio implements ContentModifier<RadioConfiguration> {
applyContent(): WrappedBuilder<[RadioConfiguration]> {
return wrapBuilder(buildDiRadio)
}
}
[@Builder](/user/Builder)
function buildDiRadio(config: RadioConfiguration) {
Column() {
Text(config.checked + '')
Image(config.checked ? $r('app.media.icon') : $r('app.media.app_icon')).width(24).height(24).onClick(() => {
if (config.checked) {
config.triggerChange(false)
} else {
config.triggerChange(true)
}
})
}
}
[@Entry](/user/Entry)
[@Component](/user/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%')
}
}
更多关于HarmonyOS 鸿蒙Next Radio如何更改选中样式图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙系统中,更改Next Radio组件的选中样式图片,可以通过自定义样式资源文件实现。具体操作步骤如下:
-
准备图片资源:首先,准备好需要设置为选中样式的图片,并将其放置在项目的
resources/rawfile
目录下。 -
定义样式文件:在
resources/base/element
目录下创建一个新的XML文件,用于定义Next Radio的自定义样式。在该文件中,使用<radio>
标签来配置Next Radio组件的样式,并通过ohos:selected_drawable
属性来指定选中状态下的图片资源。示例代码:
<radio ohos:width="match_parent" ohos:height="wrap_content" ohos:selected_drawable="$rawfile/selected_image" ohos:unselected_drawable="$rawfile/unselected_image"/>
-
应用样式:在布局文件中,引用刚才定义的样式文件,将Next Radio组件的样式更改为自定义样式。
-
编译并运行:保存所有更改,重新编译并运行项目,即可看到Next Radio组件在选中状态下显示的图片已经更改为自定义的图片。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html