SwiftUI - 放置在 NavigationView 中时 VStack 不会填满整个屏幕答案

【问题标题】：SwiftUI - VStack not filling entire screen when placed in NavigationViewSwiftUI - 放置在 NavigationView 中时 VStack 不会填满整个屏幕
【发布时间】：2020-02-14 18:38:31
【问题描述】：

似乎当放置在 NavigationView 中时，VStacks 不会填满整个垂直空间。还是我做错了什么？

var body: some View {
    NavigationView {
        VStack(alignment: .leading) {
            Text("HEY")
        }
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .background(.gray)
    }
    .navigationBarTitle("Reçu", displayMode: .inline)
}

我还自定义了UINavigationBar 给它一些颜色并将navigationBarTitle 设置为内联。

我尝试了两种解决方法：

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: Alignment.topLeading)
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)

第一个填充更多的垂直空间，但不是全部。

【问题讨论】：

嘿，@sohomang，在回答你的问题之前，让我问一下你想要实现什么？也许是彩色背景？或者，也许您希望您的观点从上到下？
@MarkMoeykens 两者，实际上！我希望此 NavigationView 具有固定的背景颜色。将 .background(myColor) 堆叠到 NavigationView 并没有减少它。这就是我尝试将它放在 VStack 上的原因。
我也遇到了同样的问题，你有没有找到解决 NavigationView 中 VStack 顶部那个奇怪空间的方法？

标签： ios swift swiftui

【解决方案1】：

为了让您的视图具有背景颜色，我建议您使用 ZStack 视图：

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack {
                Color.gray                
            }
            .edgesIgnoringSafeArea(.all)
            .navigationBarTitle("Reçu", displayMode: .inline)
        }
    }
}

您甚至可以创建以颜色为参数的自定义视图（以便在任何地方重复使用）：

struct BgColorView<Content>: View where Content: View{
    private let color: Color
    private let content: () -> Content

    init(color: Color, @ViewBuilder content: @escaping () -> Content) {
        self.color = color
        self.content = content
    }
    var body: some View {
        ZStack {
            color.edgesIgnoringSafeArea(.all)
            content()
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationView {
            BgColorView(color: Color.green) {
                Text("Hello world!")
            }
            .navigationBarTitle("Reçu", displayMode: .inline)
        }
    }
}

对于第二个问题，这完全取决于您的需求。让内容左上角对齐的最简单方法是使用 Spacer 视图。

struct ContentView: View {
    var body: some View {
        NavigationView {
            BgColorView(color: Color.green) {
                VStack {
                    HStack {
                        Text("Hello world!")
                        Spacer()
                    }
                    Spacer()
                }
            }
            .navigationBarTitle("Reçu", displayMode: .inline)
        }
    }
}

但同样，这取决于你想要得到什么。

【讨论】：

【解决方案2】：

您当前正在设置navigationBarTitle 的NavigationView。但是，如果您删除列表中的navigationBarTitle，可能会删除您尝试清理的空间。请参阅有关如何执行此操作的其他堆栈溢出答案： How to remove the default Navigation Bar space in SwiftUI NavigiationView

这是 Apple 的官方教程，他们还将navigationBarTitle 放在列表中，而不是实际的NavigationView： https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation#set-up-navigation-between-list-and-detail

【讨论】：

【解决方案3】：

看起来您的视图层次结构中添加了两个导航视图。

如果父视图有一个NavigationView，而您要使用NavigationLink 进入子视图，那么您不必将NavigationView 添加到它自动添加的子视图中。
如果您直接为您的UIHostingController 设置新的rootView，则将NavigationView 添加到新的rootView 中。

【讨论】：

【解决方案4】：

这是一个向您展示如何切换自定义视图或屏幕的示例：

struct MyView: View {
    @State var isActive = false
    var body: some View {
        NavigationView {
                VStack(alignment: .leading) {
                    Button(action: {
                        self.isActive = true
                    }) {
                        Text("Hey")
                    }
                }
                .frame(width: 100, height: 100, alignment: .center)
                .background(Color.blue)
                .foregroundColor(Color.white)
            }
        .fullScreenCover(isPresented: self.$isActive, content: {
            Text("This is full screen View or custom view")
        })
            .navigationBarTitle("Reçu", displayMode: .inline)
    }
}

【讨论】：