I use navigationlink and I also want to use side menu

Viewed 247

I have a NavigationView component in my iOS app that's built with SwiftUI.

I use navigationlink to change my page.In the second screen, I want to show side menu.But now I havetwo layers NavigationView in my iOS app, it's not my want to show.I want the second screen only have side menu.

is it possible or am i missing something about the way navigation is being managed in Swift?

How should I change my code?

here's my ContentView.swift:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView{
            VStack {
                NavigationLink(
                    destination: SwiftUIView_map(),
                    label: {
                        Text("Skip")
                            .fontWeight(.bold)
                            .font(.title)
                            .padding()
                            .background(Color.purple)
                            .cornerRadius(20)
                            .foregroundColor(.white)
                    })
                HeaderView()
                    .offset(y:-60)
                NavigationLink(
                    destination: Text("Login"),
                    label: {
                        Text("Login")
                            .fontWeight(.bold)
                            .font(.title)
                            .padding()
                            .background(Color.purple)
                            .cornerRadius(20)
                            .foregroundColor(.white)
                    })
                NavigationLink(
                    destination: Text("Sign up"),
                    label: {
                        Text("Sign up")
                            .fontWeight(.bold)
                            .font(.title)
                            .padding()
                            .background(Color.purple)
                            .cornerRadius(20)
                            .foregroundColor(.white)
                    })
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}


struct HeaderView: View {
    var body: some View {
        HStack{
        VStack(alignment: .leading, spacing: 2){
            Text("Just")
                .font(.system(size: 60,weight:.heavy,design:.rounded))
                .fontWeight(.black)
                .multilineTextAlignment(.leading)
            Text("test")
                .font(.system(size: 60,weight:.heavy,design:.rounded))
                .fontWeight(.black)
        }
        Spacer()
        }
        .padding()
    }
}

The navigation sidebar:

import SwiftUI

struct SwiftUIView_map: View {
    @State private var isShowing = false
    var body: some View {
        NavigationView{
            ZStack{
                if isShowing{
                    SideMenuView(isShowing: $isShowing)
                }
                HomeView()
                    .cornerRadius(isShowing ? 20 : 10 )
                    .offset(x: isShowing ? 300 : 0,y:isShowing ? 44 :0)
                    .scaleEffect(isShowing ? 0.8 : 1)
                    .navigationBarItems(leading: Button(action: {
                        withAnimation(.spring()){
                            isShowing.toggle()
                        }
                    }, label: {
                        Image(systemName: "list.bullet")
                            .foregroundColor(.black)
                    }))
                    .navigationTitle("home")
            }
        }
    }
}

struct SwiftUIView_map_Previews: PreviewProvider {
    static var previews: some View {
        SwiftUIView_map()
    }
}

struct HomeView: View {
    var body: some View {
        ZStack{
            Color(.white)
            Text(/*@START_MENU_TOKEN@*/"Hello, World!"/*@END_MENU_TOKEN@*/)
                .padding()
        }
    }
}

If you want more detailed code, please click the link https://github.com/simpson0826/swifttest.git

1 Answers

You need to use the NavigationView only in ContentView(root view).

struct SwiftUIView_map: View {
    @State private var isShowing = false
    var body: some View {
//        NavigationView{
            ZStack{
                if isShowing{
                    SideMenuView(isShowing: $isShowing)
                }
                HomeView()
                    .cornerRadius(isShowing ? 20 : 10 )
                    .offset(x: isShowing ? 300 : 0,y:isShowing ? 44 :0)
                    .scaleEffect(isShowing ? 0.8 : 1)
                    .navigationBarItems(trailing: Button(action: {
                        withAnimation(.spring()){
                            isShowing.toggle()
                        }
                    }, label: {
                        Image(systemName: "list.bullet")
                            .foregroundColor(.black)
                    }))
                    .navigationTitle("home")
            }
//        }
    }
}

enter image description here

enter image description here

Related