SwiftUI - VStack не заполняет весь экран при размещении в NavigationView

Question

Кажется, что при размещении в 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 в строку.

Я пробовал 2 обходных пути:

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

Чтобы иметь цвет фона для вашего вида, я предлагаю вам перейти к представлению 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)
        }
    }
}

Но, опять же, это зависит от того, что вы пытаетесь получить.