在HarmonyOS NEXT开发中如何实现将背景颜色设置透明度？

Question

在HarmonyOS NEXT开发中如何实现将背景颜色设置透明度？如何实现将背景颜色设置透明度，例如
Text(item.tag).backgroundColor(Color.Gray).fontColor(Color.White)我只想让这个text的背景色具有透明度的效果目前我使用了 .opacity(0.8)来设置，是影响到文字颜色的透明度了

Column() { 
  Text("曲阜市三孔旅游区") 
    .fontSize("46lpx") 
    .fontColor(Color.White) 
    .margin({ bottom: "20lpx" }) 
  Row() { 
    Text("5A") 
      .fontColor(Color.White) 
      .backgroundColor("#DC4237") 
      .padding({ 
        top: "5lpx", 
        bottom: "5lpx", 
        left: "14lpx", 
        right: "14lpx" 
      }) 
      .fontSize("29lpx") 
      .borderRadius({ 
        topRight: "23lpx", 
        bottomLeft: "23lpx" 
      }) 
    Text("不负春光踏青而行") 
      .fontColor(Color.White) 
      .fontSize("29lpx") 
      .margin({ left: 10 }) 
  } 
} 
.width("100%") 
.padding({ 
  top: "10lpx" 
}) 
.height("150lpx") 
.backgroundColor("#333333") 
.borderRadius({ 
  bottomLeft: "58lpx", 
  bottomRight: "58lpx" 
}) 
.opacity(0.5) 
}

Answer 1

背景色的透明度不用opacity来设置，可以直接使用rgba来进行设置。

// xxx.ets 
@Entry 
@Component 
struct ScrollExample { 
  scroller: Scroller = new Scroller() private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
  @State alpha: string = '' build() { Column() { 
  Row() { 
    Text('测试内容') 
  } .width('100%') //  
  .height(100) 
  .backgroundColor(this.alpha) Scroll(this.scroller) { 
    Column() { 
      ForEach(this.arr, (item) => { Text(item.toString()) 
        .width('90%') .height(150) .backgroundColor(0xFFFFFF) .borderRadius(15) 
        .fontSize(16) 
        .textAlign(TextAlign.Center) 
        .margin({ top: 10 }) }, item => item) }.width('100%') } 
  .width('100%') 
  .height('100%') 
  .onScroll((xOffset: number, yOffset: number) => { let offset = this.scroller.currentOffset() 
    .yOffset 
    if (offset >= 150) { 
      this.alpha = 'rgba(255,0,0,0.8)' 
    } else if (offset <= 0) { 
      this.alpha = 'rgba(255,0,0,0.6)' 
    } else { 
      this.alpha ='rgba(255,0,0,0.3)' } 
  }) 
} 
} 
}