小编eri*_*nas的帖子

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

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

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

这是上面代码的结果：

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

我正在制作可滑动的闪存卡，用户可以用自己的内容填写。该卡包含一个垂直 ScrollView（用于文本）和水平 ScrollView（用于标签）。该卡还附加了拖动手势。但是，当我滚动 ScrollViews 时，它也会触发 DragGesture 的 .onChanged （但甚至不跟随 .onEnded）。如何在手势之前优先考虑 ScrollView？

struct ContentView: View {
    @State private var translation: CGSize = .zero

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Color(.blue).edgesIgnoringSafeArea(.all)

                VStack {
                    ScrollView {
                        Text("blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah …