Как создать дизайн, полностью закрывающий кнопку "Назад" и верхнюю панель с поперечной кнопкой над ней?

#ios #swift #swiftui

Вопрос:

Я пытаюсь создать дизайн ниже, используя SwiftUI, но не могу найти правильный подход. Я пытался, но мое изображение не закрывает кнопку «Назад», а переходит ниже к кнопке «Назад»

Ожидаемый дизайн

   VStack(spacing: 16) {
            VStack {
                ZStack(alignment: .topTrailing) {
                    Image("defaultImage")
                        .resizable()
                        .frame( height: 200)
                    Button("Cancel", action: {
                        print("cancel")
                    })
                    .padding(12)

                }
            }
}

Мой дизайн 🙁

1. Если бы вы могли предоставить больше кода представления, я мог бы помочь в отладке. На первый взгляд, я предполагаю, что вам нужно сделать одну из двух вещей: во-первых, изменить стиль панели навигации на .inline или заставить ваш VStack игнорировать безопасную область. Это позволит вам переместить его за панель навигации.

2. @nickreps спасибо за ответ, немного обновил мой код. Да, я должен игнорировать безопасную зону, и изображение должно отображаться под кнопкой «Назад».

Ответ №1:

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

 import SwiftUI
struct FirstView: View{
    var body: some View{
        NavigationView {
            VStack{
                NavigationLink(destination: BackgroundImageNav()){
                    Text("Go to the view")
                        .font(.title)
                }
            }
        }
    }
}
struct BackgroundImageNav: View {
    @Environment(.presentationMode) var presentationMode
    // remplacing the back button action, (only problem is that this disable the swipe back)
    var body: some View {
        ZStack {
            // ZStack help you having your image behind the other views
            VStack {
                Image("defaultImage")
                    .resizable()
                    .frame(height: 180)
                    .edgesIgnoringSafeArea(.all)
                Spacer()
                // having a spacer that push the image on the top and ignoring the safe area
            }
            VStack(alignment:.leading){
                HStack{
                    Button(action:{
                        presentationMode.wrappedValue.dismiss()
                        // back button action
                    }){
                    Image(systemName:"chevron.left")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: 30, height: 30)
                        .foregroundColor(.white)
                        }
                        Spacer()
                        Rectangle()
                            .fill(Color.white)
                            .frame(width: 200, height: 80, alignment: .center)
                         Spacer()
                    Button(action:{
                        // do something
                    }){
                    Image(systemName: "xmark")
                        .resizable()
                        .frame(width: 24, height: 24)
                        .foregroundColor(.white)
                        }
                    }.padding()
                    Text("Title")
                        .bold()
                        .font(.title)
                        .foregroundColor(.black)
                        .background(Color.white)
                        .padding(24)
                Spacer()
            }
        }.navigationBarHidden(true)
        // removing the bar to customize the back button
    }
}

struct backgroundImage_Previews: PreviewProvider {
    static var previews: some View {
        FirstView()
    }
}