-1

I want to make a scrolling app with a gradient background. As user scrolls - background color changes. For example, the bottom is black and the top is white I would specify the height of a VStack for 8000, and for this height, as the user scrolls the screen he will see the color change.

I didn't find any solution. Tried making LinearGradient for VStack and Rectangle figures for its full height, but it only covers the phone screen size (can't fill all 8000 height points). So if I scroll upwards, the gradient is lost and it only displays the black screen.

Thank you![enter image description here]1

Vanfen
  • 39
  • 1
  • 10

1 Answers1

0

You can achieve this using a rectangle within a 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")
            }
        }
    }
}

enter image description here

bonky fronk
  • 748
  • 5
  • 15
  • This perfectly works for default ScrollView, thank you! I've forgot to mention. The scrollView I'm using is [Custom](https://stackoverflow.com/a/58708206/9901977) and there is a bug I've described in a question. Maybe you can help with this also? – Vanfen May 05 '20 at 10:38