Question

当放置在NavigationView中时，VStack似乎不会填满整个垂直空间。或者也许我做错了什么？

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)

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

Answer 1

似乎在视图层次结构中添加了两个导航视图。

如果父视图具有NavigationView，而您正使用NavigationLink进入子视图，则不必向已自动添加的子视图添加NavigationView。
如果您直接为rootView设置新的UIHostingController，则将NavigationView添加到该新的rootView中。

Answer 2

为了使视图具有背景色，建议您使用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)
        }
    }
}

但是，这再次取决于您要尝试的工作。

Answer 3

您当前正在设置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

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

SwiftUI-当放置在NavigationView中时，VStack无法充满整个屏幕

4 个答案: