SwiftUI iOS14 - NavigationView + List - 不会填充空间 [英] SwiftUI iOS14 - NavigationView + List - Won't fill space

问题描述

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

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

这会产生以下结果:

我不明白为什么列表会像那样悬停在导航视图的中心.据我所知，这应该会生成一个占据所有可用空间的列表视图(导航栏所在的顶部除外).

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

确实当在 iOS 13.5 上运行时，我得到的结果如下图:

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.

任何帮助将不胜感激.

谢谢

推荐答案

问题

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

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.

它不再总是 PlainListStyle(如在 iOS 13 中)，但有时也是 InsetGroupedListStyle.

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

您需要明确指定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 上也是如此).

Solution #2 - explicit navigationViewStyle

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

您可以尝试将 navigationViewStyle 设置为 StackNavigationViewStyle(如在 iOS 13 中):

You can try setting the navigationViewStyle to the StackNavigationViewStyle (as in 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 - 不会填充空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！