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

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

HarmonyOS
2024-09-23 13:56:58
浏览
收藏 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)'  
        }  
      })  
    }  
  }  
}
分享
微博
QQ
微信
回复
2024-09-23 18:18:20
相关问题
webview中跨域问题解决方案
2368浏览 • 1回复 待解决
HarmonyOS 自定义Dialog背景色透明问题
769浏览 • 1回复 待解决
SideBarContainer如何设置透明度
2224浏览 • 1回复 待解决
HarmonyOS 如何设置颜色透明度
559浏览 • 1回复 待解决
设置子窗口透明度未生效
1619浏览 • 1回复 待解决
HarmonyOS color颜色怎么指定透明度
450浏览 • 1回复 待解决
HarmonyOS 如何设置渐变背景色
567浏览 • 1回复 待解决
如何设置窗口的背景色
1815浏览 • 1回复 待解决
如何设置WebView的背景色
370浏览 • 1回复 待解决
自定义颜色透明度如何实现?
220浏览 • 1回复 待解决
TextInput按压态背景色如何修改
2324浏览 • 1回复 待解决
Button组件如何设置渐变背景色
2347浏览 • 1回复 待解决
使用js引擎 设置dom背景色无效
722浏览 • 0回复 待解决
AlertDialog没有找到设置背景色API
259浏览 • 1回复 待解决
JSUI按钮 toolbar的按下背景色怎么去掉
5256浏览 • 1回复 待解决
开发疑难问题如下,求解决方案
129浏览 • 1回复 待解决
如何设置背景色的饱和度和亮度?
337浏览 • 1回复 待解决
HarmonyOS代码封装解决方案
433浏览 • 1回复 待解决