SwiftUI - Inconsistent list item widths

Question

I have a curious situation. I have two lists that both use ForEach to iterate over several ListItem structs. In the first view, the ListItems seem to go out closer to the horizontal edges than in the second view. Both use similar code like this:

    var body: some View {
        NavigationView {
            List {
                ForEach(self.tvm.filteredTrucks, id:\.id) { truck in
                    NavigationLink (destination: TruckDetail(truck: truck)) {
                        TruckListItem(truck: truck, truckLogos: tvm.truckLogos)
                    }
                }
            }
        }
    }

but the results are different. See attached images.

Notice the right and left borders as well as the separator line lengths. For the life of me I can't figure out why they are different.

In another app, I create a list the same way, and I see the same horizontal spacing issue...

...This time with a different colored background. Anyone seen this before and know what is going on?

score 1 · Answer 1 · answered Apr 01 '21 at 16:54

1

Further research seems to indicate that if you attach a .sheet to the List, the items are made more narrow. If you attach the .sheet to a view above the List, i.e. a NavigationView, then the items display as expected.

answered Apr 01 '21 at 16:54

Ferdinand Rios

972
6
18

You can also use it directly on e.g. the `Button` responsible for showing the modal view – Andreas May 19 '21 at 17:06

score 0 · Answer 2 · answered Apr 01 '21 at 02:01

Without seeing the full source code, I would guess there are 2 things going on here:

Views in SwiftUI automatically condenses as small as possible to fit the content. So if the content doesn't extend to the full width of the screen, the rows in your list will be only as wide as needed. In order to fix this, you could set the .frame(maxWidth: .infinity) on part of the content in the rows. For more details, here's a video on how to use frames in SwiftUI.
You are using a List and lists have style which automatically adapt based on the environment (iPhone, iPad, inside a NavigationView, inside a NavigationView with NavigationBarButtons, etc.). You can manually override which style you want to use by using .listViewStyle(). For more details, here's a video on how to use List in SwiftUI.

score 0 · Answer 3 · answered Apr 01 '21 at 17:29

This code shows the effect. Simply comment out the .sheet below the navigationView and remove the // from the .sheet below the List.

import SwiftUI

struct ContentView: View {
    @State private var presented: Bool = false
    
    var body: some View {
        NavigationView {
            List {
                ForEach (0..<10, id: \.self) {item in
                    Color.red
                }
            }
            .navigationTitle(Text("Test"))
//            .sheet (isPresented: $presented) {
//                Text("Test")
//            }
        }
        .sheet (isPresented: $presented) {
            Text("Test")
        }

    }
}

SwiftUI - Inconsistent list item widths

3 Answers3