SwiftUI: запуск нового представления из меню слайдера, которое не охватывалось предыдущим представлением

Question

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

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

Это мое мнение, когда представление меню верно

Это мой проблемный вид. Когда я нажимаю, например, Платежи, я не могу избавиться от Карты и кнопки в этом представлении

Это мой HomeView (Карта и кнопка) код:

 import SwiftUI

struct HomeView: View {
    @State var showMenu = false


var body: some View {
        let drag = DragGesture()
            .onEnded {
                if $0.translation.width < -100 {
                    withAnimation {
                        self.showMenu = false
                    }
                }
            }
        return GeometryReader { geometry in
            ZStack(alignment: .leading) {
                if self.showMenu {
                SlideInMenuView()
                    .frame(width: geometry.size.width/1)
                    .transition(.move(edge: .leading))
                }

                HomeSupportView()
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .cornerRadius(20)
                    .scaleEffect(self.showMenu ? 0.8 : 1)
                    .offset(x: self.showMenu ? 150 : 0, y : self.showMenu ? 50 : 0)
                    .disabled(self.showMenu ? true : false)

                MenuButton(showMenu: self.$showMenu)

            }
            .gesture(drag)
        }
    }
}


struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        HomeView()
    }
}

struct MenuButton: View {
    @Binding var showMenu: Bool

    var body: some View {
        Button(action: {
            withAnimation {
                self.showMenu.toggle()
            }
        }){
            Image(systemName: "line.horizontal.3")
                .imageScale(.large)
                .frame(width: 100, height: 60)
                .background(Color.black)
                .clipShape(Circle())
                .opacity(0.8)
                .foregroundColor(.white)
                .rotationEffect(.degrees(self.showMenu ? 90 : 0))
                .scaleEffect(self.showMenu ? 1.2 : 1)
        }
        .padding(.top, -380)
    }
}

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

import SwiftUI

struct SlideInMenuView: View {
    @State private var showingPaymentDetails = false

    var body: some View {
        NavigationView {
        VStack(alignment: .leading) {

            HStack {
                Image(systemName: "person")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                Text("Profile")
                    .foregroundColor(.gray)
                    .font(.headline)
            }
            .padding(.top, 150.0)
            HStack {
                Image(systemName: "person.2.fill")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                Text("Matches")
                    .foregroundColor(.gray)
                    .font(.headline)
            }
            .padding(.top, 30)
            NavigationLink(destination:
                PaymentDetailsView())
            {
                HStack {
                    Image(systemName: "creditcard")
                        .foregroundColor(.gray)
                        .imageScale(.large)
                    Text("Payments")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
                .padding(.top, 30)
            }

            HStack {
                Image(systemName: "hammer")
                    .foregroundColor(.gray)
                    .imageScale(.large)
                Text("Settings")
                    .foregroundColor(.gray)
                    .font(.headline)
            }
            .padding(.top, 30)
            Spacer()

        }
        .padding()
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(Color(red: 32/255, green: 32/255, blue: 32/255))
        .edgesIgnoringSafeArea(.all)

    }
    }
}

struct SlideInMenuView_Previews: PreviewProvider {
    static var previews: some View {
        SlideInMenuView()
    }
}

Если кто-нибудь знает, как помочь мне здесь ... Большое спасибо заранее, ребята. Будьте здоровы.

Ура, Лебоб

@ Крис: Я так и хочу. Я сделал 4 последовательных снимка экрана с соответствующими щелчками.

Answer 1

***** ОБНОВЛЕННЫЙ ОТВЕТ *****

спасибо за ваши уточняющие фотографии

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

import SwiftUI

class Global : ObservableObject {

    @Published var showMenu = true
    @Published var showMenuButton = true

}

struct PaymentDetailsView : View {

    @EnvironmentObject var global : Global

    var body: some View {
        Text("payment")
            .onAppear() {
                withAnimation() {
                    self.global.showMenuButton = false
                }
        }
        .onDisappear() {
            withAnimation() {
                self.global.showMenuButton = true
            }
        }
    }
}

struct HomeSupportView : View  {

    @EnvironmentObject var global : Global

    var body: some View {
        ZStack {
            Rectangle().fill(Color.blue)
            Text("home")
        }
    }
}



struct SlideInMenuView: View {

    @EnvironmentObject var global : Global

    @State private var showingPaymentDetails = false

    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {

                HStack {
                    Image(systemName: "person")
                        .foregroundColor(.gray)
                        .imageScale(.large)
                    Text("Profile")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
                .padding(.top, 150.0)
                HStack {
                    Image(systemName: "person.2.fill")
                        .foregroundColor(.gray)
                        .imageScale(.large)
                    Text("Matches")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
                .padding(.top, 30)
                NavigationLink(destination:
                    PaymentDetailsView().environmentObject(self.global))
                {
                    HStack {
                        Image(systemName: "creditcard")
                            .foregroundColor(.gray)
                            .imageScale(.large)
                        Text("Payments")
                            .foregroundColor(.gray)
                            .font(.headline)
                    }
                    .padding(.top, 30)
                }

                HStack {
                    Image(systemName: "hammer")
                        .foregroundColor(.gray)
                        .imageScale(.large)
                    Text("Settings")
                        .foregroundColor(.gray)
                        .font(.headline)
                }
                .padding(.top, 30)
                Spacer()

            }
            .padding()
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(Color(red: 32/255, green: 32/255, blue: 32/255))
            .edgesIgnoringSafeArea(.all)

        }
    }
}

struct SlideInMenuView_Previews: PreviewProvider {
    static var previews: some View {
        SlideInMenuView().environmentObject(Global())
    }
}

struct ContentView: View {

    @EnvironmentObject var global : Global

    var body: some View {
        let drag = DragGesture()
            .onEnded {
                if $0.translation.width < -100 {
                    withAnimation {
                        self.global.showMenu = false
                    }
                }
        }
        return GeometryReader { geometry in
            ZStack(alignment: .leading) {
                if self.global.showMenu {
                    SlideInMenuView()
                        .environmentObject(self.global)
                        .frame(width: geometry.size.width/1)
                        .transition(.move(edge: .leading))
                        .zIndex(3)
                }

                HomeSupportView()
                    .environmentObject(self.global)
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .cornerRadius(20)
                    .scaleEffect(self.global.showMenu ? 0.8 : 1)
                    .offset(x: self.global.showMenu ? 150 : 0, y : self.global.showMenu ? 50 : 0)
                    .disabled(self.global.showMenu ? true : false)
                    .zIndex((2))

                MenuButton().environmentObject(self.global)
                    .zIndex(4)
            }
            .gesture(drag)
        }
    }
}


struct HomeView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environmentObject(Global())
    }
}

struct MenuButton: View {

    @EnvironmentObject var global: Global

    var body: some View {
        Button(action: {
            withAnimation {
                self.global.showMenu.toggle()
            }
        }){
            if self.global.showMenuButton {
                Image(systemName: "line.horizontal.3")
                    .imageScale(.large)
                    .frame(width: 100, height: 60)
                    .background(Color.black)
                    .clipShape(Circle())
                    .opacity(0.8)
                    .foregroundColor(.white)
                    .rotationEffect(.degrees(self.global.showMenu ? 90 : 0))
                    .scaleEffect(self.global.showMenu ? 1.2 : 1)
            } else {
                EmptyView()
            }
        }
        .padding(.top, -380)
    }
}

Answer 2

SwiftUI имеет модификатор zIndex (), который вы можете использовать для упорядочивания представлений. Это может помочь в вашей ситуации.