如何实现顶部渐变遮罩效果

直播间的弹幕列表顶部需要渐变遮罩效果

HarmonyOS
2024-07-22 12:08:35
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

使用overlay通过属性linearGradient同时使用blendMode让当前浮层与下方list混合实现渐变遮罩效果。

效果图如下:

参考代码:

@Entry 
@Component 
struct Index { 
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] 
 
  @Builder 
  overlayBuilder() { 
    Stack() 
      .height("100%") 
      .width("100%") 
      .linearGradient({ 
        direction: GradientDirection.Bottom, // 渐变方向 
        colors: [["#00FFFFFF", 0.0], ["#FFFFFFFF", 0.3]] // 数组末尾元素占比小于1时满足重复着色效果 
      }) 
      .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) 
      .hitTestBehavior(HitTestMode.None) 
  } 
 
  build() { 
    Column() { 
      List({ space: 20, initialIndex: 0 }) { 
        ForEach(this.arr, (item: number) => { 
          ListItem() { 
            Text('' + item) 
              .width('100%') 
              .height(100) 
              .fontSize(16) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
          } 
          .onClick(() => { 
            console.log('is click') 
          }) 
        }, (item: string) => item) 
      }.width('90%') 
      .scrollBar(BarState.Off) 
      .overlay(this.overlayBuilder()) 
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) 
    }.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 }) 
  } 
}
分享
微博
QQ
微信
回复
2024-07-22 19:54:52
相关问题
HarmonyOS 渐变遮罩效果如何实现
97浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果
185浏览 • 1回复 待解决
引导遮罩效果实现的最佳方案
820浏览 • 1回复 待解决
HarmonyOS 如何实现一个遮罩
233浏览 • 1回复 待解决
List组件如何设置两端的渐变效果
1847浏览 • 1回复 待解决
DataPanel如何实现颜色的渐变
346浏览 • 1回复 待解决
组件如何实现渐变色?
1968浏览 • 1回复 待解决
如何实现渐变的圆角边框
2381浏览 • 1回复 待解决
如何实现组件边缘的颜色渐变
1854浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
495浏览 • 1回复 待解决
HarmonyOS 如何给image设置遮罩
154浏览 • 1回复 待解决
如何实现动画转场效果
727浏览 • 1回复 待解决
如何实现视频滤镜效果
1926浏览 • 1回复 待解决
canvas如何实现水印效果
824浏览 • 1回复 待解决