HarmonyOS 上如何实现透明渐变遮罩效果

可以使用linearGradient加层叠布局、设置遮罩和list的位置，实现渐变的效果

相关文档链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-gradient-color-V5#lineargradient

@Entry
@Component
struct page240709164929023 {

  @State message: string = 'Hello World';
  @State
  products: Array<Product> = [];

  @Builder
  fadingOverlay() {
    Column()
      .width('100%')
      .height(200)
      .linearGradient({
        angle: 180,
        colors: [[Color.Black, 0], [Color.Transparent, 1]]
      })
      .zIndex(1) // 设置遮罩的 z-index 为 1，使其位于 Text 之上
  }

  @Builder
  danmuList(){
    // 产品列表
    List() {
      ForEach(this.products, (item: Product, index: number) => {
        ListItem() {
          Text(item.content.toString())
            .fontSize(50)
            .fontColor(Color.White)
            .opacity(this.products[index].opacity)
        }
      }, (item: Product) => {
        return item.content + "";
      })
    }.height("100%").width('100%')
  }

  aboutToAppear() {
    for (let index = 0; index < 20; index++) {
      const pro: Product = new Product(index, 1);
      this.products.push(pro)
    }
  }

  build() {
    // 添加遮罩层
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        // 遮罩层
        this.fadingOverlay()
        this.danmuList()
      }

    }
    .width('100%').height('100%')
    .backgroundColor(Color.Pink)
  }
}

class Product {
  content: number;
  opacity: number;
  constructor(content: number, opacity: number) {
    this.content = content;
    this.opacity = opacity;
  }
}

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6]

  build() {
    Column() {
      Column() {
        // BlendMode.SRC_IN所在控件（包含子控件）为要做渐隐的具体内容,注意src_in所在的控件的大小和linearGradient所在的控件大小位置必须完全一致，不然可能会有露线问题（linearGradient没有被完全覆盖掉）
        Column() {
          Text("234")
            .fontSize(180)
            .fontColor(Color.Orange)
            .width(300)
            .height(500)
          Text("234")
            .fontSize(180)
            .fontColor(Color.Orange)
            .width(300)
            .height(500)
          Text("234")
            .fontSize(180)
            .fontColor(Color.Orange)
            .width(300)
            .height(500)
        }
        .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)
      }
      .linearGradient({
        angle: 180, colors: [['rgba(0, 255, 255, 1)', 0],
          ['rgba(0, 255, 255, 1)', 0.6],
          ['rgba(0, 255, 255, 0)', 1]]
      })
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) // 启离屏

    }
    .backgroundImage('common/1.jpeg')
    .backgroundImageSize(ImageSize.Cover)
    .width('100%')
    .height('100%')
  }
}
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.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.