VStack not filling screen width in ScrollView, does fill in List

Question

I've created a scrollable list of images as follows:

NavigationView {
    List {
        ForEach(landmarks) { landmark in
            landmark.image(forSize: 200)
              // some modifiers...
    }
    .navigationBarTitle(Text(category.rawValue))
}

This is the UI this code produces:

Now, I'd like to get rid of the line separators that List creates. Therefor, I replaced List with ScrollView. This is what the preview then shows:

How do I fix this?

I've seen this other similar question, but the accepted answer doesn't actually solve the problem, but introduces a fixed width.

Answer 1

Found a full SwiftUI solution.

var body: some View {
    GeometryReader { geometry in
        ScrollView(alwaysBounceVertical: true) {
            VStack {
                // Your code
            }.frame(width: geometry.size.width)
        }
    }.edgesIgnoringSafeArea(.all)
}

Answer 2

I had the same problem, apparently the scroll view uses the minimum size as possible.

You can add the .frame modifier to the content inside the stack and declare his width as the screen's width like this:

ContentInsideScrollView { ... }.frame(width: UIScreen.main.bounds.width)

pay attention of the padding, your scroll view could extends over the screen's width.

Otherwise you can set your row with an infinity width:

.frame(minWidth: 0, maxWidth: .infinity)

Either-way, you have to work with the .frame modifier