SwiftUI iOS14 - NavigationView + List - 不会填充 space

Question

自 iOS 14 更新以来，我在 NavigationView 中遇到列表问题。

这里是代码的简单分解 - 我已经删除了所有没有显示问题的东西

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

这会产生以下结果：

我不明白为什么列表会那样悬停在导航视图的中央。据我所知，这应该会产生一个列表视图，该列表视图占用所有可用的space（导航栏所在的顶部除外）。

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

我已经通读了文档，但无法理解为什么会突然出现这种行为。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

问题

看起来 List 或 NavigationView 在 iOS 14 中的默认样式在某些情况下可能与 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 - 显式 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
    }
}

SwiftUI iOS14 - NavigationView + List - 不会填充 space

SwiftUI iOS14 - NavigationView + List - Won't fill space

swift

swiftui

swiftui-list

ios14

swiftui-navigationview

问题

解决方案 #1 - 显式 listStyle

解决方案 #2 - 显式 navigationViewStyle