带有渐变的SwiftUI ScrollView文本

Question

我正在尝试实现一个视图，其中我有一个长文本并且文本通过拖动手势滚动。 （滚动视图）。我试图实现的技巧是要有一个渐变，所以在 to 和 Botton 的文本应该有一种不透明度：

我可以使用 ZStack 和质量渐变来做到这一点，但是一旦我将矩形移到我的文本上，来自 ScrollView 的滚动就不再起作用了。

这是我想要做的动画版本：https://media.giphy.com/media/j3bXQOV1vZMxZS6GAk/giphy.gif

这是我的代码：

struct ContentView: View {
    var body: some View {
        GeometryReader { fullView in
            ZStack {
                ScrollView() {
                    Text("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.")
                }
                
                LinearGradient(gradient: Gradient(colors: [.white, .clear,.clear, .white]), startPoint: .top, endPoint: .bottom)
                    .mask(
                        Rectangle()
                )
            }
        }
    }
}

你们有这样的需求吗？

感谢和问候， 最大

Answer 1

是的，我实际上想这样做一次，但我从来没有做过。但是，查看您的代码，您可能会执行以下操作：

//useful for testing large text blocks
func * (lhs: Text, rhs: Int) -> Text {
    var out = lhs
    for _ in 0..<rhs { out = out + lhs }
    return out
}
struct ContentView: View {
    var body: some View {
        //first geometry reader, used to determine the _size_ of the gradient
        GeometryReader { fullView in
            ScrollView() {
                ZStack{
                    Text("Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.") * 60
                    //second geometry reader, used to determin the _offset_ of the gradient
                    GeometryReader{ geo in
                        LinearGradient(gradient:
                            Gradient(colors: [
                                .white,
                                .clear,
                                .clear,
                                .white
                            ]), startPoint: .top, endPoint: .bottom)
                            .mask( Rectangle() )
                            .frame(width: fullView.size.width, height: fullView.size.height)
                            .offset(x: 0, y: -geo.frame(in: .global).origin.y)
                    }
                }
                
            }
        }
        .edgesIgnoringSafeArea(.all)
    }
}

这里发生的事情是我们使用fullview Geometry Reader 设置线性渐变的大小，并且我们根据geo Geometry Reader 的框架设置偏移量，两个几何读取器的位置在视图“层次结构”很重要。

---

另外，我想指出，您的渐变在某些地方看起来有点暗... 通过查看代码，这可能不是您打算做的。发生这种情况是因为 Color.clear 实际上是一个 0,0,0 的 rgb 值，alpha 为 0。所以当颜色被插值时，它会变成黑色或灰色。

您可以通过将.clear 替换为：

.init(UIColor(red: 1, green: 1, blue: 1, alpha: 0))

这是一个截图，我将顶部颜色设置为.init(UIColor(red: 1, green: 1, blue: 1, alpha: 0))，底部颜色设置为.clear：