HarmonyOS 如何实现将背景颜色设置透明度

如何实现将背景颜色设置透明度，例如

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)
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.

HarmonyOS

Excelsior_abit

2024-12-18 16:04:26

2318浏览

回答 1

按赞同

按时间

superinsect

背景色的透明度不用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)' }
  })
}
}
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.

2024-12-18 17:42:52

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 如何实现将背景颜色设置透明度

订阅鸿蒙技术特刊，精选内容抢先看