淡入/淡出 ScrollView Swift UI

Question

当用户滚动文本时，是否可以淡入/淡出滚动视图顶部和底部的文本？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)
                }
            )   
        }
    }
}

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

看图片：

Answer 1

Rectangle()这可以通过使用顶部和底部“移除”的掩模来实现.blendMode(.destinationOut)

这允许您在顶部和底部有固定的高度梯度。

struct ContentView: View {
    @State var nameTextField: String = ""
        
    var body: some View {
        ScrollView {
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\n").bold()
        }
        .mask {
            Rectangle()
                .overlay(alignment: .top) {
                    ScrollMask(isTop: true)
                }
                .overlay(alignment: .bottom) {
                    ScrollMask(isTop: false)
                }
        }
        .padding()
        .foregroundColor(.white)
        .scrollContentBackground(.hidden)
        .background {
            Image("wave")
        }
    }
}

struct ScrollMask: View {
    let isTop: Bool

    var body: some View {
        LinearGradient(colors: [.black, .clear], startPoint: UnitPoint(x: 0.5, y: isTop ? 0 : 1), endPoint: UnitPoint(x: 0.5, y: isTop ? 1 : 0))
            .frame(height: 150)
            .frame(maxWidth: .infinity)
            .blendMode(.destinationOut)
    }
}

另一种方法是使用LinearGradient具有多个颜色/停止的单一颜色/停止。在这种情况下，顶部三分之一淡入，底部三分之一淡出：

.mask {
    LinearGradient(colors: [.clear, .black, .black, .clear],
                   startPoint: UnitPoint(x: 0.5, y: 0), endPoint: UnitPoint(x: 0.5, y: 1))
        .frame(maxWidth: .infinity, maxHeight: .infinity)
}

有关反向蒙版的更多信息，请参阅此处