Home > Software design >  How to make the screen change when clicking on the button in SwiftUI (NavigationView)
How to make the screen change when clicking on the button in SwiftUI (NavigationView)

Time:12-23

I want to make it so that when the button is pressed, the screen (NavigationView) changes from the current one to another. Also, I don't really understand whether this can be implemented through the ContentView. My code (ContentView):



import SwiftUI



struct acquaintance1: View {
    // Первый экран знакомства
    var body: some View {
        ZStack{
                Button (action: {})
                {
                    VStack{
                        ZStack{
                            VStack{
                                Image("scren1")
                                    .resizable()
                                    .overlay {
                                        Button {
                                           // any action
                                            
                                            let impactMed = UIImpactFeedbackGenerator(style: .heavy)
                                            impactMed.impactOccurred()
                                        } label: {
                                            Image(systemName: "arrow.right.square.fill")
                                                    .font(.system(size: 50))
                                                    .foregroundColor(Color(.systemOrange))
                                                    .position(x: 349, y: 621)
                                                    
                                        }
                                    }
                            }
                            
                        }
                    }
                }
        }
    }
}



// Второй экран знакомства
struct View1_1: View {
    var body: some View {
        NavigationLink {
            View1_2()
        } label: {
            Text("Переход на View1_2")
        }
        .navigationTitle("View1_1")
    }
}
// Третий экран знакомства
struct View1_2: View {
    var body: some View {
        Text("Последний экран")
    }
}



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



Also I don't understand. This must be done through the ContentView or APP structure.

CodePudding user response:

What you'd like to do is use a hidden navigation link with a trigger. You can then toggle the trigger in your button to navigate.

Here is an example with your code.

struct acquaintance1: View {
    @State var navigate: Bool = false
    // Первый экран знакомства
    var body: some View {
        ZStack{
                Button (action: {})
                {
                    VStack{
                        ZStack{
                            VStack{
                                Image("scren1")
                                    .resizable()
                                    .overlay {
                                        Button {
                                           // any action
                                            
                                            let impactMed = UIImpactFeedbackGenerator(style: .heavy)
                                            impactMed.impactOccurred()

                                            //trigger navigation here
                                            navigate = true
                                        } label: {
                                            Image(systemName: "arrow.right.square.fill")
                                                    .font(.system(size: 50))
                                                    .foregroundColor(Color(.systemOrange))
                                                    .position(x: 349, y: 621)
                                                    
                                        }
                                    }
                                NavigationLink(destination: View1_1(), isActive: $navigate, label: {
                                    Text("")
                                }).opacity(0.0)
                            }
                            
                        }
                    }
                }
        }
    }
}
  • Related