SwiftUI iOS14-NavigationView +列表-无法填充空间 [英] SwiftUI iOS14 - NavigationView + List - Won't fill space

问题描述

自iOS 14更新以来，我在NavigationView中的列表出现问题.

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 +列表-无法填充空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！