ScrollView in VStack align to bottom in swiftui

Question

I can't get this scrollview to align to the bottom in SwiftUI!

I've three items in the scrollview, but I want them to be aligned to the bottom of the screen (the red arrow shows where I WANT the items to be!)

Here is my code:

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Color.blue.edgesIgnoringSafeArea(.all)
            VStack {
                ScrollView {
                    Spacer(minLength: 80)
                    Text("a")
                    Text("b")
                    Text("c")
                }.frame(maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/)
                Text("Button")
                    .padding()
            }.frame(alignment: .bottom)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

I'm trying spacers, and rotating content by 180 degrees? What should I do?

Does this answer your question https://stackoverflow.com/a/58708206/12299030? — Asperi, Aug 19 '21 at 09:02
Ok, but vertical ScrollView has *no* bottom - it grows there by defined-size content, so then it is not clear how do you want it to fill and behave. — Asperi, Aug 19 '21 at 09:37

score 5 · Answer 1 · answered Aug 19 '21 at 16:49

GeometryReader to the rescue! First, wrap the ScrollView in a GeometryReader so you can get the scrolling area’s height. Then set that as the minimum height of the ScrollView’s content and use bottom alignment:

var body: some View {
    ZStack {
        Color.blue.edgesIgnoringSafeArea(.all)
        VStack {
            GeometryReader { geometry in
                ScrollView {
                    VStack {
                        Text("a")
                        Text("b")
                        Text("c")
                    }
                    .frame(maxWidth: .infinity,
                           minHeight: geometry.size.height,
                           alignment: .bottom)
                }
            }
            Text("Button")
                .padding()
        }
    }
}

This works, Life saver! thank you! In my case, I didn't need the VStack outsie of the GeometryReader either. — C0D3, Aug 29 '23 at 13:29

ScrollView in VStack align to bottom in swiftui

1 Answers1