相关疑难解决方法(0)

我希望让滚动视图在边缘附近淡出。我已经实现了一个掩模，它几乎达到了我想要的效果。但是，滚动停止工作，并且蒙版使矩形变黑（应该有图像）。

我看过另一篇文章，它覆盖了视图的背景颜色，以创建看起来像淡出的东西，但我的背景是渐变的，所以它不起作用。

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

这是上面代码的结果：

下面是我整理的一个示例，以说明我想要实现的目标。

当用户滚动文本时，是否可以淡入/淡出滚动视图顶部和底部的文本？Xcode 14.2、iOS 16、斯威夫特 5.7

我研究了其他解决方案，例如：SwiftUI - fade out a ScrollView

我尝试过以下操作，但它水平淡出侧面并添加颜色。我希望它是垂直的并且透明淡入淡出，如图所示。

ScrollView {
    ScrollViewReader { scrollViewProxy in
        VStack {        
            ForEach(chatMessages, id: \.id) { message in
                messageView(message: message)
                
            }
            .mask(
                VStack(spacing: 0) {
                    
                    // Top gradient
                    LinearGradient(gradient:
                                    Gradient(
                                        colors: [Color.black.opacity(0), Color.black]),
                                   startPoint: .leading, endPoint: .trailing
                    )
                    .frame(width: 250)
                    
                    // Middle
                    Rectangle().fill(Color.black)
                    
                    // Bottom gradient
                    LinearGradient(gradient:
                                    Gradient(
                                        colors: [Color.black, Color.black.opacity(0)]),
                                   startPoint: .leading, endPoint: .trailing
                    )
                    .frame(width: 250)
                }
            )   
        }
    }
}

我已经使用此代码来产生水平淡入淡出，但需要在顶部和底部垂直。这是模拟器中现在的内容。

看图片：