Set a view at the bottom of a Scrollview

Question

I need to set a footer at the bottom of my scrollview:

VStack(spacing: dimensions.spacing300) {
    header
        .environment(\.mbContextTheme, .lightAlternative)
        .onTapGesture {
            UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
        }
        .background(colors.neutralBg50
            .edgesIgnoringSafeArea(.top))
    ScrollView {
        list
        Spacer()
        footer
            .frame(height: .infinity, alignment: .bottom)
            .onTapGesture {
                UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder),
                                                to: nil,
                                                from: nil,
                                                for: nil)
            }
    }
    .frame(alignment: .bottom)
}

I had tried using spacer(), geometryreader.... Using geometry reader the footer goes to the bottom but the spacer becomes too high. I need that the footer keeps just at the bottom border of the screen.

Answer 1

Why not just put the footer after the ScrollView, inside the same parent VStack?

let loremIpsum = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

var body: some View {
    VStack(spacing: 0) {
        Text("header")
            .padding()
            .frame(maxWidth: .infinity)
            .background(.yellow)
        ScrollView {
            VStack {
                Text(loremIpsum).font(.title2)
                Text(loremIpsum).font(.title2)
                Text(loremIpsum).font(.title2)
                Text(loremIpsum).font(.title2)
            }
            .padding(.vertical)
        }
        Text("footer")
            .padding()
            .frame(maxWidth: .infinity)
            .background(.orange)
    }
}