HarmonyOS 鸿蒙Next 怎么实现内部的渐变遮罩？

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

示例代码:

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

[@Builder](/user/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%')
    .height('100%')
    .scrollBar(BarState.Off)
    .overlay(this.overlayBuilder())
    .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
  }
  .width('100%')
  .height('100%')
  .backgroundColor(0xDCDCDC)
}
}