HarmonyOS 鸿蒙Next中列表渐隐效果

效果如图，代码在最下面，如有帮助给个采纳谢谢

interface listsPa{ label: string; bgColor: string }
@Entry
@Component
struct FadingEdgeListPage {
  @State fadeDirection: GradientDirection = GradientDirection.Bottom; // 渐隐方向
  @State fadeLabel: string = '底部渐隐';                                // 按钮文案

  // 背景色（渐变终点色需与此保持一致）
  private readonly BG_COLOR: string = '#E8E8E8';
  private readonly ITEM_BG: string = '#FFFFFF';

  // 更多数据确保滚动体验
  private dataList: listsPa[] = [
    { label: '列表项 01', bgColor: '#FF6B6B' },
    { label: '列表项 02', bgColor: '#FFA07A' },
    { label: '列表项 03', bgColor: '#FFD700' },
    { label: '列表项 04', bgColor: '#90EE90' },
    { label: '列表项 05', bgColor: '#87CEEB' },
    { label: '列表项 06', bgColor: '#DDA0DD' },
    { label: '列表项 07', bgColor: '#FF69B4' },
    { label: '列表项 08', bgColor: '#00CED1' },
    { label: '列表项 09', bgColor: '#FF8C00' },
    { label: '列表项 10', bgColor: '#9370DB' },
    { label: '列表项 11', bgColor: '#3CB371' },
    { label: '列表项 12', bgColor: '#CD853F' },
    { label: '列表项 13', bgColor: '#BA55D3' },
    { label: '列表项 14', bgColor: '#20B2AA' },
    { label: '列表项 15', bgColor: '#FF6347' },
    { label: '列表项 16', bgColor: '#4682B4' },
    { label: '列表项 17', bgColor: '#DB7093' },
    { label: '列表项 18', bgColor: '#32CD32' },
    { label: '列表项 19', bgColor: '#FF4500' },
    { label: '列表项 20', bgColor: '#8A2BE2' },
  ];

  /**
   * 构建渐变遮罩 Builder
   *
   * 渐变逻辑：
   * - 起始 0%：完全透明 => DST_IN 下内容不可见（被裁剪）
   * - 终点 30%：完全填充背景色 => DST_IN 下内容完全可见
   * - 30%~100%：保持完全填充（中间以下的内容正常显示）
   */
  @Builder
  fadeMask() {
    Stack()
      .width('100%')
      .height('100%')
      .linearGradient({
        direction: this.fadeDirection,
        colors: [
          ['#00' + this.BG_COLOR.slice(1), 0.0],          // 0%处完全透明
          [this.BG_COLOR, 0.3],                             // 30%处完全遮挡
        ]
      })
      // 关键：DST_IN 保留目标在源有 alpha 处的像素
      .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
      .hitTestBehavior(HitTestMode.None)                    // 穿透触摸事件
  }

  build() {
    Column() {
      // 顶部切换按钮
      Row() {
        Button('顶部渐隐')
          .type(this.fadeDirection === GradientDirection.Top ? ButtonType.Normal : ButtonType.Capsule)
          .backgroundColor(this.fadeDirection === GradientDirection.Top ? '#007AFF' : '#D1D1D1')
          .fontColor(this.fadeDirection === GradientDirection.Top ? Color.White : '#666')
          .fontSize(14)
          .onClick(() => {
            this.fadeDirection = GradientDirection.Top;
            this.fadeLabel = '顶部渐隐';
          })

        Button('底部渐隐')
          .type(this.fadeDirection === GradientDirection.Bottom ? ButtonType.Normal : ButtonType.Capsule)
          .backgroundColor(this.fadeDirection === GradientDirection.Bottom ? '#007AFF' : '#D1D1D1')
          .fontColor(this.fadeDirection === GradientDirection.Bottom ? Color.White : '#666')
          .fontSize(14)
          .margin({ left: 12 })
          .onClick(() => {
            this.fadeDirection = GradientDirection.Bottom;
            this.fadeLabel = '底部渐隐';
          })
      }
      .width('100%')
      .justifyContent(FlexAlign.Center)
      .padding({ top: 12, bottom: 8 })
      .backgroundColor('#F0F0F0')

      // 提示文字
      Text(`当前: ${this.fadeLabel}  →  滚动列表查看效果`)
        .fontSize(13)
        .fontColor('#888')
        .width('100%')
        .textAlign(TextAlign.Center)
        .padding({ bottom: 8 })
        .backgroundColor('#F0F0F0')

      // 核心区域：List + 渐变遮罩 overlay
      List({ space: 12 }) {
        ForEach(this.dataList, (item:listsPa, index: number) => {
          ListItem() {
            Row() {
              // 左侧色块
              Circle({ width: 10, height: 10 })
                .fill(item.bgColor)
                .margin({ right: 12 })

              Text(item.label)
                .fontSize(16)
                .fontWeight(FontWeight.Medium)
                .fontColor('#333')

              Blank()

              Image($r('sys.media.ohos_ic_public_arrow_right'))
                .width(20)
                .height(20)
                .fillColor('#CCC')
            }
            .width('100%')
            .height(56)
            .padding({ left: 16, right: 16 })
            .borderRadius(12)
            .backgroundColor(this.ITEM_BG)
            .shadow({
              radius: 4,
              color: '#10000000',
              offsetY: 1
            })
          }
          .onClick(() => {
            console.log('fadingEdge item clicked: ' + item.label);
          })
        }, (_item:listsPa, index: number) => index.toString())
      }
      .width('100%')
      .layoutWeight(1)
      .padding({ left: 16, right: 16, top: 8, bottom: 8 })
      .scrollBar(BarState.Off)
      .edgeEffect(EdgeEffect.Spring)
      // 渐变遮罩通过 overlay 叠加到 List 上
      .overlay(this.fadeMask)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.BG_COLOR)
  }
}