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

@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 }) 
  } 
}