背景色透明度问题解决方案

顶部 bar 组件的背景色需要根据下面的 scroll 组件滑动而改变背景色透明度,但是顶部 bar 组件是一容器,里面有文本和图片,文本和图片的颜色不能透明,所以组件的 opacity 不能使用,因为这个属性会导致整个组件的透明,而不是单纯的背景色透明根据上面的需求,我目前只有一种方案,利用滑动的距离计算透明度,然后通过百分比算法计算透明度的 16进制,再往颜色值中间追加两位 16 进制数字,代表颜色的透明度,例如 #0FEEEEEE,这种方案我想请教下有没有更好的实现方案。

HarmonyOS
2024-09-23 13:56:58
1700浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
put_get

背景色的透明度不用opacity来设置,可以直接使用rgba来进行设置,具体可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-types-V5

demo:

// 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.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
分享
微博
QQ
微信
回复
2024-09-23 18:18:20


相关问题
webview中跨域问题解决方案
4031浏览 • 1回复 待解决
HarmonyOS 如何设置背景透明度
673浏览 • 1回复 待解决
HarmonyOS 自定义Dialog背景色透明问题
1890浏览 • 1回复 待解决
HarmonyOS THREAD_BLOCK_6s 问题解决
991浏览 • 1回复 待解决
SideBarContainer如何设置透明度
2961浏览 • 1回复 待解决
HarmonyOS List组如何将背景色设置透明
517浏览 • 1回复 待解决
HarmonyOS 如何设置颜色透明度
1633浏览 • 1回复 待解决
HarmonyOS color颜色怎么指定透明度
1663浏览 • 1回复 待解决
HarmonyOS 关于开屏背景色
586浏览 • 1回复 待解决
HarmonyOS 弹窗自带背景色
489浏览 • 1回复 待解决
自定义颜色透明度如何实现?
986浏览 • 1回复 待解决
设置子窗口透明度未生效
2209浏览 • 1回复 待解决
HarmonyOS 如何设置渐变背景色
2214浏览 • 1回复 待解决
如何设置WebView的背景色
1600浏览 • 1回复 待解决
如何设置窗口的背景色
2571浏览 • 1回复 待解决
HarmonyOS 有没有设置颜色透明度的方法
1534浏览 • 1回复 待解决