HarmonyOS 渐变遮罩效果如何实现？

// xxx.ets  
@Entry  
@Component  
struct page240527110725022 {  
  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 })  
  }  
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.