SwiftUI How do I navigate on Child View to a new navigation page

Question

I am very new to SwiftUI and I am having some trouble with the navigation.

From the code below, I have a ContentView, UserView and BobView in hierarchical order.

Content View displays 10 UserViews and inside user view, there is a Text called "Click me to navigate" to navigate me to the Bob View.

My problem is as of right now, when I click on the "Click me to navigate", it navigates me to the BobView, which is what I want. However, I am still able to see the Text "Content View and Image Content View and the other 9 Users when I scroll.

I see why it's doing that but I am not too sure how I can fix it. I don't want to create the navigation on content view or else, it will create a navigation on the whole BobView() which is not what I want. I only want the navigation when I click on the Text("Click me to navigate") inside User View.

Any help would be appreciated :)

My code architecture:

struct ContentView: View {

    var body: some View {
            ScrollView(.vertical, showsIndicators: false){
                 VStack {
                     Text("Content View text")
                     Image("contentviewimage")
                     ForEach((1...10), id: \.self) {
                        user in UserCard()
                     }
                 }
           }
    }
}


struct UserView: View {

    var body: some View {
        NavigationView {
                 VStack {
                     Image("bob")
                     Text("Hello my name is bob")
                     NavigationLink(
                        destination: BobView()){
                            Text("Click me to navigate").font(.system(size: 20))
                        }
                 }
            }
        }
    }
}

struct BobView: View{
  var body: some View{
     VStack{Text("bob view")}
   }
}

Yodagama Yodagama · Accepted Answer · 2020-11-08T01:53:17

struct ContentView: View {

    var body: some View {
        NavigationView {
            ScrollView(.vertical, showsIndicators: false){
                 VStack {
                     Text("Content View text")
                     Image("contentviewimage")
                     ForEach((1...10), id: \.self) { user in
                        UserView()
                     }
                 }
           }
        }
    }
}


struct UserView: View {

    var body: some View {
        
                 VStack {
                     Image("bob")
                     Text("Hello my name is bob")
                     NavigationLink(
                        destination: BobView()){
                            Text("Click me to navigate").font(.system(size: 20))
                        }
                 }
  
        }
    }

struct BobView: View{
  var body: some View{
     VStack{Text("bob view")}
   }
}



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

SwiftUI How do I navigate on Child View to a new navigation page

1 Answers