VStack inside ScrollView bottom alignment in SwiftUI

Question

Currently building a chat application and I need new messages to appear at the bottom of the screen. I also need to have messages aligned to the bottom. However, using VStack inside ScrollView features top alignment by default.

a busy swiftui

    ScrollView {
        VStack(alignment: .leading, spacing: 16) {
            Spacer()
            .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
            ForEach(notList, id: \.self) { not in
                NotRow(not: not)
                    
            }
            
        }
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, alignment: Alignment.topLeading)
        
    }

What should I do to fix this?

I want it to behave like in chat apps: you can do little scrolling but messages return to the bottom. — Hekes Pekes, Sep 16 '19 at 07:49

score 14 · Answer 1 · answered Mar 02 '21 at 14:31

ScrollView does not propose the same height to its children (VStack in this case) as it was proposed to it. It just asks for minimal size. The solution is to make its direct child respond with the minimum height which was proposed to ScrollView itself. We can achieve this by reading the proposed height via GeometryReader and setting that as minimum height of the child.

GeometryReader { reader in
    ScrollView {
        VStack {
            /// Spacer() or Color.red will now behave as expected
        }
        .frame(minHeight: reader.size.height)
    }
}

This is a better solution to flipping as the scrollbar is in the expected position. This solution was much needed. Thank you. — JohnnyD, Apr 09 '23 at 19:57

Antoine Lamy · Answer 2 · 2020-08-28T13:58:42.703

11

A bit late to answer that one but it might help someone else. You could use a good old double rotation trick to achieve the result you want. Other solutions does not work because the maximum size inside a scroll view is undefined as it depends on its child views to compute its own content size.

ScrollView {
  VStack(alignment: .leading, spacing: 16) {
      Spacer()
      .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
      ForEach(notList, id: \.self) { not in
          NotRow(not: not)
      }

  }
  .padding()
  .rotationEffect(Angle(degrees: 180))
}
.rotationEffect(Angle(degrees: 180))

edited Aug 28 '20 at 13:58

answered Aug 28 '20 at 13:52

Antoine Lamy

863
10
9

This will result in the scrollview starting scrolled all the way to the bottom of the content, if the content size is greater than the available space. The better solution is to use a GeometryReader as suggested by @orkhan-alikhanov – JoGoFo Jul 26 '22 at 08:16

score 5 · Answer 3 · answered Jan 22 '20 at 00:32

5

I think you're missing a maxHeight in VStack

VStack(alignment: .leading) {
  Spacer().frame(maxWidth: .infinity)
  // content here
}
.frame(maxHeight: .infinity) // <- this

answered Jan 22 '20 at 00:32

Darlan Mendonça

463
6
9

Wow, seems kinda inelegant to have to do this. But it worked for me! – Rick May 20 '21 at 08:11

score 3 · Answer 4 · answered Jan 25 '20 at 19:20

If you remove Spacer() and put it after the closing braces of your ForEach, it will fix it. Here is how your updated code will look like:

ScrollView {
        VStack(alignment: .leading, spacing: 16) {
            .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, maxHeight: .infinity, alignment: Alignment.topLeading)
            ForEach(notList, id: \.self) { not in
                NotRow(not: not)

            }
            Spacer()
        }
        .padding()
        .frame(minWidth: 0, maxWidth: .infinity, minHeight:0, alignment: Alignment.topLeading)

    }

score 0 · Answer 5 · answered Oct 30 '19 at 12:42

0

Try changing all of your Alignment.topLeadings to Alignment.bottomLeading

answered Oct 30 '19 at 12:42

Benj

736
7
21

VStack inside ScrollView bottom alignment in SwiftUI

5 Answers5

Linked