HarmonyOS鸿蒙Next中backgroundImage属性和linearGradient属性无法同时生效

HarmonyOS鸿蒙Next中backgroundImage属性和linearGradient属性无法同时生效

@Entry
@Component
struct Test {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Row() {

      }
      .width(300)
      .height(20)
      .borderRadius(10)
      .backgroundImage($r('app.media.transparent_background'), ImageRepeat.XY)
      .backgroundImageSize({ width: 10, height: 10 })
      .linearGradient({ direction: GradientDirection.Right, colors: [['#00ff0000', 0], ['#ffff0000', 1]] })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

如上面的代码和动图所示，实际效果这两个属性没法共同出现，看文档也没有这两个属性有互斥的说法，也不知道就是不能同时出现还是官方bug，有大佬有相同的疑问吗？

颜色渐变：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-gradient-color-0000001427584832-V2#ZH-CN_TOPIC_0000001574088877__

背景设置：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-universal-attributes-background-0000001477981165-V2#ZH-CN_TOPIC_0000001574088781__


更多关于HarmonyOS鸿蒙Next中backgroundImage属性和linearGradient属性无法同时生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

正常吧，设置背景有优先级，文档上虽然没说，但想想也知道背景设置如果同时生效，也只会是其中一个覆盖另一个。

总之

1、不同的背景属性，实测优先级为

backgroundColor > backgroundImage > linearGradient

2、相同属性只会显示最后一个

.backgroundColor(Color.Red)
.backgroundColor(Color.Blue) //会显示蓝色

@Entry
@Component
struct Test {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Row() {

      }
      .width(300)
      .height(20)
      .borderRadius(10)
      .linearGradient({ direction: GradientDirection.Right, colors: [['#00ff0000', 0], ['#ffff0000', 1]] })
      .backgroundImage($r('app.media.icon'), ImageRepeat.XY)
      .backgroundImageSize({ width: 10, height: 10 })
      .backgroundColor(Color.Red)
      .backgroundColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

更多关于HarmonyOS鸿蒙Next中backgroundImage属性和linearGradient属性无法同时生效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢你的解答，但是我还是有一点不同的看法：一个是背景图片的设置，另一个是组件的颜色渐变，两个虽然都是针对组件背景进行设置，但是是不同的方向，图片和颜色这两个应该是可以叠加的，就像backgroundColor和backgroundImage是可以叠加的一样。如果是相同的方向，如都是颜色相关的话，后一个覆盖前一个是非

在HarmonyOS鸿蒙Next中，backgroundImage和linearGradient属性无法同时生效，这是因为它们属于不同的背景设置方式。backgroundImage用于设置背景图片，而linearGradient用于设置线性渐变背景。系统默认会优先应用其中一个属性，导致另一个失效。解决方法是通过自定义组件或使用Canvas绘制背景，将图片和渐变效果结合。

回到顶部