HarmonyOS 鸿蒙Next Radio如何更改选中样式图片

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

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组件的选中样式图片,可以通过自定义样式资源文件实现。具体操作步骤如下:

  1. 准备图片资源:首先,准备好需要设置为选中样式的图片,并将其放置在项目的resources/rawfile目录下。

  2. 定义样式文件:在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"/>
    
  3. 应用样式:在布局文件中,引用刚才定义的样式文件,将Next Radio组件的样式更改为自定义样式。

  4. 编译并运行:保存所有更改,重新编译并运行项目,即可看到Next Radio组件在选中状态下显示的图片已经更改为自定义的图片。

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

回到顶部