Pin text to bottom of scroll view SwiftUI

Question

How can I pin a view element to the bottom of a scrollview/VStack in SwiftUI? I've tried using spacers but that doesn't seem to be working. I need the 'Footer' text to be at the bottom of the scroll view/Vstack, how can I do that?

struct ContentView: View {
    var body: some View {
        VStack {
            ScrollView(.vertical, showsIndicators: false) {
                VStack(alignment: .leading) {
                    Text("Top Title")
                    Text("Body")
                    Spacer()
                    Text("Footer") // SHOULD BE PINNED TO BOTTOM OF SCROLL VIEW
                        .frame(alignment: .bottom)
                }
            }
            .background(Color.red)

            Button("Done") {
                //some action
            }
        }
    }
}

Do you require that it be inside the scroll view? Otherwise you could just put it with the done button. — JustMakeStuff, Jun 02 '22 at 15:35
Do you want it to scroll up when the user scrolls or do you want it to stay pinned? — JustMakeStuff, Jun 02 '22 at 19:12

Asperi · Answer 1 · 2022-06-02T17:06:29.503

5

Here is possible approach:

ScrollView(.vertical, showsIndicators: false) {
    VStack(alignment: .leading) {
        Text("Top Title")
        Text("Body")
    }
}
.overlay(
    Text("Footer") 
, alignment: .bottom)   // << here !!

Guess 2: probably you wanted this

GeometryReader { gp in
    ScrollView(.vertical, showsIndicators: false) {
        VStack(alignment: .leading) {
            Text("Top Title")
            Text("Body")
            Spacer()
            Text("Footer") // SHOULD BE PINNED TO BOTTOM OF SCROLL VIEW
                .frame(alignment: .bottom)
        }
        .frame(maxWidth: .infinity, minHeight: gp.size.height)
    }
    .background(Color.red)
}

edited Jun 02 '22 at 17:06

answered Jun 02 '22 at 15:45

Asperi

228,894
20
464
690

The issue is that this does not scroll with the content – tHatpart Jun 02 '22 at 16:54
4

wait, you said "pin", pined and scrolled are mutually exclusive, no? – Asperi Jun 02 '22 at 16:59

score 1 · Answer 2 · answered Jun 02 '22 at 20:15

1

You are properly looking for the safeAreaInset modifier: https://developer.apple.com/documentation/swiftui/menu/safeareainset(edge:alignment:spacing:content:)-1dqob/

answered Jun 02 '22 at 20:15

magnuskahr

1,137
9
17

A great solution but not available before iOS 15. Asperi's solution works for iOS 14 as well. – bitops Dec 18 '22 at 06:34

Pin text to bottom of scroll view SwiftUI

2 Answers2