полноэкранное фоновое изображение с vstack - PullRequest
1 голос
/ 25 марта 2020

Я хочу иметь полноэкранное фоновое изображение с навигационным обзором (должно быть сверху, потому что оно из базового вида, а не в обычном представлении). В этом представлении я хочу VStack, который находится внутри защищенной области, поэтому между панелью навигации и разметкой снизу.

к сожалению, я получил (см. Рисунок)

Я ожидал, что тексты внутри ... enter image description here

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack(alignment: .center) {

                Image("laguna")
                    .resizable()
                    .edgesIgnoringSafeArea(.all)
                    .scaledToFill()
                    .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)

                VStack(alignment: .center) {
                    Text("just a test")
                        .font(.largeTitle)
                        .foregroundColor(Color.white)
                    Spacer()
                    Text ("not centered....why?")
                        .font(.largeTitle)
                        .foregroundColor(Color.white)

                }
                .zIndex(4)
                .navigationBarTitle("nav bar title")
            }
        }
    }
}

1 Ответ

1 голос
/ 25 марта 2020

Вот немного модифицированный вариант. Протестировано с Xcode 11.4 (окончательно выпущено) / iOS 13.4

demo

struct TestFullScreenImage: View {
    var body: some View {
        NavigationView {
            ZStack {
                Image("large_image")
                    .resizable()
                    .edgesIgnoringSafeArea(.all)
                    .scaledToFill()

                VStack {
                    Text("Just a test")
                        .font(.largeTitle)
                        .foregroundColor(.white)
                        Spacer()
                    Text("centered")
                        .font(.largeTitle)
                        .background(Color.green)
                }
                .navigationBarTitle("Navigation Title")
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}
...