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

Question

自 iOS 14 更新以来，我遇到了 NavigationView 中的 List 问题。

这是代码的简单细分 - 我已经将所有未显示问题的内容都进行了条带化

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

这会产生以下结果：

我无法弄清楚为什么列表会像那样悬停在导航视图的中心。 据我所知，这应该会生成一个占据所有可用空间的列表视图（导航栏所在的顶部除外）。

事实上，当在 iOS 13.5 上运行时，我得到的结果如下图所示：

我已经通读了文档，但无法弄清楚为什么会突然发生这种行为。

任何帮助将不胜感激。

谢谢

Answer 1

问题

看起来 iOS 14 中List或NavigationView的默认样式在某些情况下可能与 iOS 13 中的不同。

解决方案 #1 - 显式listStyle

它不再总是PlainListStyle （如在 iOS 13 中），但有时也是InsetGroupedListStyle 。

您需要将listStyle明确指定为PlainListStyle ：

.listStyle(PlainListStyle())

例子：

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

解决方案#2 - 显式导航视图样式

看起来 NavigationView 的默认样式有时可以是DoubleColumnNavigationViewStyle （即使在 iPhone 上）。

您可以尝试将navigationViewStyle设置为StackNavigationViewStyle （如在 iOS 13 中）：

.navigationViewStyle(StackNavigationViewStyle())

例子：

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