如何实现直播评论场景中顶部渐变遮罩效果
===================

1.  开发者可使用overlay在当前组件上添加遮罩。
2.  通过linearGradient可设置颜色渐变效果。
3.  使用blendMode让当前浮层与List混合。

代码示例如下：

@Entry
@Component
struct MaskDemo {
  private arr: number\[\] = \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9\];

  @Builder
  createOverlayBuilder() {
    Stack()
      .height('100%')
      .width('100%')
      .linearGradient({
        direction: GradientDirection.Bottom, _// Gradient direction_
        colors: \[\['#00FFFFFF', 0.0\], \['#FFFFFFFF',
          0.3\]\] _// When the proportion of elements at the end of the array is less than 1, it satisfies the repeated shading effect_
      })
      .blendMode(BlendMode.DST\_IN, BlendApplyType.OFFSCREEN)_// Implement a top gradient mask effect using the DST\_IN blending mode._
      .hitTestBehavior(HitTestMode.None)
  }

  build() {
    Column() {
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text(item.toString())
              .width('100%')
              .height(100)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .backgroundColor(0xFFFFFF)
          }
          .onClick(() => {
            console.log('is click');
          })
        }, (item: string) => item)
      }
      .width('90%')
      .height('100%')
      .scrollBar(BarState.Off)
      .overlay(this.createOverlayBuilder())
      .blendMode(BlendMode.SRC\_OVER, BlendApplyType.OFFSCREEN)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
  }
}

实现效果：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/75/v3/PnebdtfUSgK5Ost7Qvq8WA/zh-cn_image_0000002624475934.png?HW-CC-KV=V1&HW-CC-Date=20260709T133855Z&HW-CC-Expire=86400&HW-CC-Sign=DEDA71D1E62A1FD4E69F948BE3254B7E2498FB2AC99CA6B843BD3CA1B5ACC993)