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

问题

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

解决方案 #1 - 显式listStyle

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

您需要明确指定listStyleto 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 - 显式navigationViewStyle

看起来 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
    }
}