Question 67730 in IOS Swift Question posted in
The official documentation can be found here.

How do I navigate to my SecondView by tapping image button? – Ios swift

I’m trying out NavigationView and want to move to SecondView on clicking radio-on-button. The code works fine if I’m using text button, I need to use an icon/image though and it doesn’t work in that case. What am I missing?

import SwiftUI

struct FirstView: View {
    var body: some View {
        NavigationView {
                   VStack {
                       Text("Main Content View")
                           .font(.largeTitle)
                           .fontWeight(.medium)
                  strong text         .foregroundColor(Color.blue)
                       Spacer()
                       NavigationLink(destination: SecondView(), label: {
                           Button(action: {
                               
                           }) {
                               
                               Image("radio-on-button")
                                   .renderingMode(.original)
                                   .resizable()
                                   .frame(width: 75, height: 75)
                                   .foregroundColor(.red)
                                   .padding(.horizontal)
                               
                           }
                       }) 
                 }
               }
    }
}

struct SecondView: View {
    var body: some View {
        Text("Hello, Second View!")
                    .font(.largeTitle)
                    .fontWeight(.medium)
                    .foregroundColor(Color.blue)
    }
}
Tags:

4

Answers


  1. 0

    When you want to navigate, you simply use NavigationLink without a Button:

    NavigationLink(destination: SecondView(), label: {
    Image("radio-on-button")
        .renderingMode(.original)
        .resizable()
        .frame(width: 75, height: 75)
        .foregroundColor(.red)
        .padding(.horizontal)
})

    Button is used to execute some action.

    Login or Signup to reply.
  2. 0

    Use following code to solve. No need to use Button for NavigationLink label only use Image as a NavigationLink Label.

    NavigationLink(destination: SecondView(), label: {
    Image("radio-on-button") //Remove the button and add only Image
        .renderingMode(.original)
        .resizable()
        .frame(width: 75, height: 75)
        .foregroundColor(.red)
        .padding(.horizontal)
})
    Login or Signup to reply.
  3. 0

    In order to fix issue you need to bind and manage tag with NavigationLink, So create one state variable inside you view as follow, just add above body.

       @State var selection: Int? = nil

    Then update your button code as follow to add NavigationLink

    NavigationLink(destination: SecondView(), label: {
  Button(action: {
      print("Radio button tapped")
      self.selection = 1                     
  }) {
      Image("radio-on-button")
      .renderingMode(.original)
      .resizable()
      .frame(width: 75, height: 75)
      .foregroundColor(.red)
      .padding(.horizontal)
                           
  }
})

    I hope this will solve your problem. If not feel free to discuss. Thanks

    Login or Signup to reply.
  4. 0

    Here is the full code:

    import SwiftUI

struct FirstView: View {
    var body: some View {
        NavigationView {
            VStack {
                Text("Main Content View")
                    .font(.largeTitle)
                    .fontWeight(.medium)
                    .foregroundColor(Color.blue)
                
                NavigationLink {
                    SecondView()
                } label: {
                        Image("radio-on-button") 
                            .renderingMode(.original)
                            .resizable()
                            .frame(width: 75, height: 75)
                            .foregroundColor(.red)
                            .padding(.horizontal)
                    
                }

            }
        }
    }
}

struct SecondView: View {
    var body: some View {
        Text("Hello, Second View!")
            .font(.largeTitle)
            .fontWeight(.medium)
            .foregroundColor(Color.blue)
    }
}

    A navigation Link acts like a button, so you can style it just like one. I tested the code out by myself, and it works. Think of the label part as just like another sub-view. This way, you can put as much stuff that you would like in it, and whenever the user taps on anything inside of that "subview" the second view will come up.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search