SwiftUI不透明度渐变

Question

我希望在滚动视图的边缘处实现淡出效果。我已经实现了一个遮罩，几乎实现了我的要求。但是，滚动停止工作，并且遮罩使矩形变黑（而不是显示图片）。

我看到另一篇文章，该文章通过覆盖背景色在视图上创建类似于淡出的效果，但我的背景是渐变的，所以无法实现。

var body: some View {
    ZStack {
        LinearGradient(
            gradient: Gradient(colors: [Color(#colorLiteral(red: 0.1333333333, green: 0.7098039216, blue: 0.4509803922, alpha: 1)), Color(#colorLiteral(red: 0.1607843137, green: 0.6705882353, blue: 0.8862745098, alpha: 1))]),
            startPoint: .top, endPoint: .bottom)
            .ignoresSafeArea()
        
        LinearGradient(gradient: Gradient(colors: [.clear, .black, .clear]), startPoint: .leading, endPoint: .trailing)
            .mask(ScrollingRectangles())
    }
}

以下是上述代码的结果：

下面是我准备的一个示例，以说明我想要实现什么效果。

- ericathanas

---

这个回答解决了你的问题吗？https://dev59.com/Mr3pa4cB1Zd3GeqPaDkH#63874117 - Asperi

@Asperi 这个方法正在创建一个白色渐变叠加层。我猜系统背景默认是白色的？ - ericathanas

为什么你不使用颜色：.clear呢？ - ios coder

抱歉，它从clear到systemBackground（显示为白色）。 - ericathanas

我认为你是错的，除非我没有理解你想要表达的意思！但是你可以在不使用白色的情况下达到同样的效果。 - ios coder

Answer 1

你可以查看这个链接：https://designcode.io/swiftui-handbook-mask-and-transparency

或者

你可以使用masking来实现透明效果。

ZStack {
    // Your View here....    
}
.mask(LinearGradient(gradient: Gradient(colors: [.black, .black, .black, .clear]), startPoint: .bottom, endPoint: .top))

- N4SK

---

请注意，您在清除之前添加的颜色越多，淡入淡出的效果就会变得越小，反之亦然。 - Aggressor