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

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

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