0

I have content in my ScrollView that is sometimes short and other times longer than the screen. I'm trying to stretch the content to the bottom if it is too short, but no matter what I do the content stays short:

enter image description here

This is what the code looks like:

struct ContentView: View {
    var body: some View {
        ScrollView {
            VStack {
                Text("Header")
                    .padding()
                VStack {
                    Text("Content")
                    Image(systemName: "bell")
                    Spacer()
                }
                .padding()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color(.systemBackground))
            }
        }
        .background(Color.yellow.ignoresSafeArea())
    }
}

I would've expected the Spacer() in my VStack to stretch it to the end. Or the maxHeight: .infinity to help me out as well, but the content always stays short even tho the ScrollView is the screen height (because of the yellow background on it). This becomes more of a problem on iPad when the one screen shows the big gap. How can this be solved for various screen height?

TruMan1
  • 33,665
  • 59
  • 184
  • 335
  • 1
    The scrollview content height can't set itself to be indefinite height, I believe that's why the Spacer in the VStack has no visible effect. If you want everything to be white to the bottom of the screen. Try setting an explicit height to the scrollview itself (not the content), or make it an overlay of the background color (just a couple things to try out). – Cenk Bilgen Apr 13 '21 at 12:53
  • Does this answer your question https://stackoverflow.com/a/62878812/12299030? – Asperi Apr 13 '21 at 13:02
  • The general rules of SwiftUI is not same inside ScrollView I am not sure if Apple even wanted to be that deferent! But for your info Space is not working in ScrollView or Color do not fill up! we have to give height to them, also if you remember, I recommended to develop your own custom scrollView to save this times to finding bugs of apple scrollview. making a customScrollView would take less time to try fix issues of ScrollView. – ios coder Apr 13 '21 at 13:03
  • @Asperi I did study that answer and tried it and did get me closer. There was still a gap so seemed like the number needed to be adjusted for safe zone, but more importantly, the view re-renders 9 times before settling so I was hoping I was missing something simple with the spacer but doesn't seem like its possible without this level of workaround. – TruMan1 Apr 13 '21 at 13:21

1 Answers1

1

Using @CenkBilgen's idea of using an overlay + GeometryReader, you could do the following:

struct ContentView: View {
    var body: some View {
        Color.clear
            .overlay(GeometryReader { geo in
                ScrollView {
                    VStack {
                        ForEach(1..<10) {
                            Text("\($0)").padding()
                        }
                    }
                    HStack { Spacer() }
                }
                .clipped()
                .frame(width: geo.size.width, height: geo.size.height)
            })
    }
}
New Dev
  • 48,427
  • 12
  • 87
  • 129