CODEWITHSUNDEEP
swiftswiftui
LinusG.
LinusG.

Reputation: 28912

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

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.

Upvotes: 4

Views: 7747

Answers (2)

Florent Morin
Florent Morin

Reputation: 912

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)
}

Upvotes: 8

Andre
Andre

Reputation: 7648

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

Upvotes: 3

Related Questions