SwiftUI iOS14 - NavigationView + List - 不会填充空间

Question

I'm having an issues with a List inside a NavigationView since iOS 14 update.

Here is a simple breakdown of the code - I've striped everything that doesn't show the issue

struct ContentView: View {
    
    var views = ["Line 1", "Line 2", "Line 3"]
    
    var body: some View {
        
        NavigationView {
            
            VStack {
                
                List {
                    
                    ForEach(views, id: \.self) { view in
                       
                        VStack {
                        Text("\(view)")
                        }
                        .background(Color.red)
                        
                    }
                    
                }
                
            }
            
        }
        
    }
}

This produces the following result:

I cant work out why the list is hovering in the center of the navigation view like that. As far as I can tell this should produce a listview that takes up all avaliable space (with the exception of the top where navigationbar would be).

Indeed when run on iOS 13.5 that is the result I get as pictured below:

I've had a read through the documentation but cant work out why this behaviour is suddenly happening.

Any help would be greatly appreciated.

Thanks

Answer 1

Problem

It looks like the default styles of a List or NavigationView in iOS 14 may in some cases be different than in iOS 13.

Solution #1 - explicit listStyle

It's no longer always the PlainListStyle (as in iOS 13) but sometimes the InsetGroupedListStyle as well.

You need to explicitly specify the listStyle to PlainListStyle :

.listStyle(PlainListStyle())

Example:

struct ContentView: View {
    var views = ["Line 1", "Line 2", "Line 3"]

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(views, id: \.self) { view in
                        VStack {
                            Text("\(view)")
                        }
                        .background(Color.red)
                    }
                }
                .listStyle(PlainListStyle()) // <- add here
            }
        }
    }
}

Solution #2 - explicit navigationViewStyle

It looks like the NavigationView's default style can sometimes be the DoubleColumnNavigationViewStyle (even on iPhones).

You can try setting the navigationViewStyle to the StackNavigationViewStyle (as in iOS 13):

.navigationViewStyle(StackNavigationViewStyle())

Example:

struct ContentView: View {
    var views = ["Line 1", "Line 2", "Line 3"]

    var body: some View {
        NavigationView {
            VStack {
                List {
                    ForEach(views, id: \.self) { view in
                        VStack {
                            Text("\(view)")
                        }
                        .background(Color.red)
                    }
                }
            }
        }
        .navigationViewStyle(StackNavigationViewStyle()) // <- add here
    }
}