在HarmonyOS NEXT开发中如何实现控件边缘模糊渐隐效果？

Question

在HarmonyOS NEXT开发中如何实现控件边缘模糊渐隐效果？目前List、Scroll等列表没有边缘渐隐效果。而类似porterduff算法的图层叠加，利用canvas画两个图层，利用destination-in加第二层渐变，可以让第一层达到渐隐效果，但好像canvas只能自己另外画内容，而不能把控件显示的内容作为画布的一层，再叠加第二层？

Answer 1

可以参考代码：

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