SwiftUI无尽渐变背景

Question

我想制作一个带有渐变背景的滚动应用程序。随着用户滚动 - 背景颜色发生变化。例如，底部是黑色，顶部是白色，我会将 VStack 的高度指定为 8000，对于这个高度，当用户滚动屏幕时，他会看到颜色变化。

我没有找到任何解决方案。尝试为 VStack 制作 LinearGradient 并为其全高制作 Rectangle 图形，但它仅涵盖 phone 屏幕尺寸（无法填充所有 8000 个高度点）。所以如果我向上滚动，渐变会丢失，只显示黑屏。

谢谢]1

Answer 1

您可以使用 ZStack 中的矩形实现此目的：

struct ContentView: View {
    var body: some View {
        ScrollView {
            ZStack(alignment: .top) {
                // Example width and height. Width should be the width of the device
                Rectangle().frame(width: 10000, height: 2000).foregroundColor(.clear).background(LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom))
                // Add your actual content here:
                Text("Yeet")
            }
        }
    }
}

SwiftUI无尽渐变背景

SwiftUI endless gradient background

xcode

scrollview

linear-gradients

uiscrollview

swiftui