CODEWITHSUNDEEP
swiftuiswiftui-listswiftui-navigationlinkswiftui-navigationview
Ferdinand Rios
Ferdinand Rios

Reputation: 1192

SwiftUI - Inconsistent list item widths

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.

enter image description here

enter image description here

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...

enter image description here

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

Upvotes: 3

Views: 418

Answers (3)

Ferdinand Rios
Ferdinand Rios

Reputation: 1192

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

    }
}

Upvotes: 0

Ferdinand Rios
Ferdinand Rios

Reputation: 1192

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.

Upvotes: 1

nicksarno
nicksarno

Reputation: 4245

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

  1. 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.

  2. 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.

Upvotes: 0

Related Questions