SwiftUI iOS14-NavigationView +列表-无法填充空间

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

这将产生以下结果：

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

实际上是在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-显式 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
    }
}