Navigation Link Using a form SwiftUI

Question

I want to move to another view using a button from a form, I'm trying to make a settings page. The code below, I managed how to open a URL from a form, now I want to open another page but I didn't now how to do it.

struct FormRowLinkView: View {
        
        var icon: String
        var color: Color
        var text: String
        var link: String
        
        
        var body: some View {
            
            HStack{
                ZStack{
                    RoundedRectangle(cornerRadius: 8, style: .continuous)
                        .fill(color)
                    Image(systemName: icon)
                        .imageScale(.large)
                        .foregroundColor(Color.white)
                }
                .frame(width: 36, height: 36, alignment: .center)
                
                Text(text).foregroundColor(Color.gray)
                Spacer()
                
                Button(action: {
                    guard let url = URL(string: self.link), UIApplication.shared.canOpenURL(url as URL) else {
                        return
                    }
                    UIApplication.shared.open(url as URL)
                }) {}
                    Image(systemName: "chevron.right")
                        .font(.system(size: 14, weight: .semibold, design: .rounded))
                }
                .accentColor(Color(.systemGray2))
                
            }
            
        }
    
    
    struct FormRowLinkView_Previews: PreviewProvider {
        static var previews: some View {
            FormRowLinkView(icon: "globe", color: Color.pink, text: "Website", link: "")
                .previewLayout(.fixed(width: 375, height: 60))
                .padding()
        }
    }

Answer 1

You can use NavigationView and inside of it you can use NavigationLink():

struct ContentView: View {
    
    var icon: String
    var color: Color
    var text: String
    var link: String
    
    
    var body: some View {
        NavigationView {
            VStack {
                HStack{
                    ZStack{
                        RoundedRectangle(cornerRadius: 8, style: .continuous)
                            .fill(color)
                        Image(systemName: icon)
                            .imageScale(.large)
                            .foregroundColor(Color.white)
                    }
                    .frame(width: 36, height: 36, alignment: .center)
                    
                    Text(text).foregroundColor(Color.gray)
                    Spacer()
                    
                    Button(action: {
                        guard let url = URL(string: self.link), UIApplication.shared.canOpenURL(url as URL) else {
                            return
                        }
                        UIApplication.shared.open(url as URL)
                    }) {}
                    Image(systemName: "chevron.right")
                        .font(.system(size: 14, weight: .semibold, design: .rounded))

                }
                .accentColor(Color(.systemGray2))
                
                NavigationLink {
                    Text("Destination")
                } label: {
                    ZStack{
                        RoundedRectangle(cornerRadius: 8, style: .continuous)
                            .fill(color)
                        Image(systemName: icon)
                            .imageScale(.large)
                            .foregroundColor(Color.white)
                    }
                    .frame(width: 36, height: 36, alignment: .center)
                    
                    Text(text).foregroundColor(Color.gray)
                    Spacer()
                    
                    Image(systemName: "chevron.right")
                        .font(.system(size: 14, weight: .semibold, design: .rounded))
                        .foregroundColor(.black)
                }
            }
        }
    }
}


struct FormRowLinkView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(icon: "globe", color: Color.pink, text: "Website", link: "")
            .previewLayout(.fixed(width: 375, height: 60))
            .padding()
    }
}

I hope this works, If it is not working or its wrong. just comment.

Answer 2

If u want to present a new screen add an @State var to your content view like this.

@State var isShowingSettingsScreen: Bool = false 

Then add a button that looks something like this.

    Button {
        isShowingSettingsScreen = true
    } label: {
        Text("Show Settings Screen")
    }
    .fullScreenCover(isPresented: $isShowingSettingsScreen) {
        //The screen you want to present goes here <----
        Color.red
    }