Просмотр с полноэкранным изображением и навигацией

Question

Я новичок в swiftui и борюсь с некоторыми базовыми вещами. Я пытаюсь создать вид с двумя кнопками на дне. Я хочу изображение в качестве фона всего вида.

var body: some View {
        ZStack {
            Image("bg-welcome").edgesIgnoringSafeArea(.all)
        }
    }

Это работает нормально. Я настроил свой вид следующим образом

NavigationView {
            ZStack {

                VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                    Text("1").foregroundColor(.white)
                    Text("2").foregroundColor(.white)
                    Spacer()
                    Button(action: {}){
                        Text("ooooooooo")
                    }
                }.background(Image("bg-welcome"))
            }

        }

Теперь у меня есть 2 проблемы: - отображается пробелнепосредственно перед фоновым изображением - первый текст помещается ниже, конечно, после того, как место зарезервировано для панели навигации, и я не хочу его, потому что при переходе к следующему экрану пространство все еще занято, и я хочу, чтобы весь доступныйscreen

спасибо за помощь

Answer 1

попробуйте это:

var body: some View {
        NavigationView {
            ZStack {

                VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                    Text("1").foregroundColor(.white)
                    Text("2").foregroundColor(.white)
                    Spacer()
                    Button(action: {}){
                        Text("Button 1")
                    }
                    Button(action: {}){
                        Text("Button 2")
                    }
                }.background(Image("remachine_poster")
                    .resizable()
                    .aspectRatio(contentMode: .fill)).edgesIgnoringSafeArea(.all)
            }
        }
    }

Answer 2

Вы можете добавить отступ к кнопке ....

NavigationView {
            ZStack {

                VStack() {

                    Text("1").foregroundColor(.green).padding(.top, 40)
                        Text("2").foregroundColor(.green)
                        Spacer()
                        Button(action: {}){
                            Text("Button 1")
                        }.foregroundColor(Color.red)

                        Button(action: {}){
                            Text("Button 2")
                        }.foregroundColor(Color.red)

                }
            }.background(Image("remachine_poster")
            .resizable()
            .aspectRatio(contentMode: .fill))
                .edgesIgnoringSafeArea(.vertical)
        }

Answer 3

Я закончил тем, что делал что-то подобное. Пожалуйста, дайте мне знать, если есть лучший способ

NavigationView {
            GeometryReader { gr in
            ZStack {
                VStack(alignment: HorizontalAlignment.center, spacing: 10) {
                    HStack{
                        Spacer()
                    }
                    Text("1").foregroundColor(.white).padding(EdgeInsets(top: 30, leading: 0, bottom: 0, trailing: 0))
                    Text("2").foregroundColor(.white)
                    Spacer()
                    HStack {
                        NavigationLink(destination: SigninScreen()){
                            Text("Button 1")
                        }

                        Button(action: {}){
                            Text("Button 2")
                        }
                    }.padding()
                }.background(Image("bg-welcome")
                    .resizable()
                    .aspectRatio(contentMode: .fill)).edgesIgnoringSafeArea(.all)
            }.navigationBarHidden(true)
        }
    }