Question 131271 in Xcode Question posted in
Whether you're new to Xcode or an experienced developer, our archive has everything you need to know about this integrated development environment (IDE). From basic functionalities to advanced features, our archive covers a wide range of Xcode-related questions and answers. Browse our archive now and find solutions to your Xcode questions, and take your app development skills to the next level

Xcode – Navigation Link Using a form SwiftUI

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()
        }
    }

This is how the Settings View looks like, I’m trying to code a button so the user can tap it to move to another page, i tried so many codes but with no luck

struct SettingsView: View {
    
    // Properties
    @Environment(.presentationMode) var presentationMode
    
    
    // Body
    var body: some View {
        NavigationView{
            VStack(alignment: .center, spacing: 0) {
                
                // Form
                
                Form{
                    // Section 3
                    Section(header: Text("Follow Us On Social Media")){
                        FormRowLinkView(icon: "person", color: Color.blue, text: "Profile", link: "")
                        FormRowLinkView(icon: "link", color: Color.blue, text: "Twitter", link: "")
                    }
                    .padding(.vertical, 3)
                    
                    
                    // Section 4
                    Section(header: Text("About the application")){
                        FormRowStaticView(icon: "gear", firstText: "Application", secondText: "Todo")
                        FormRowStaticView(icon: "checkmark.seal", firstText: "Compatibility", secondText: "iPhone, iPad")
                        FormRowStaticView(icon: "keyboard", firstText: "Developer", secondText: "John / G")
                        FormRowStaticView(icon: "paintbrush", firstText: "Designer", secondText: "Robort")
                        FormRowStaticView(icon: "flag", firstText: "Version", secondText: "1.0.0")
                    }.padding(.vertical, 3)
                } // End of form
                .listStyle(GroupedListStyle())
                .environment(.horizontalSizeClass, .regular)
                
                // Footer
                Text("Copyright All rights reserved. nSultan")
                    .multilineTextAlignment(.center)
                    .font(.footnote)
                    .padding(.top, 6)
                    .padding(.bottom, 8)
                    .foregroundColor(Color.secondary)
                
                
                
            } // End of VStack
            .navigationBarItems(trailing: Button(action: {
                self.presentationMode.wrappedValue.dismiss()
            }) {
                Image(systemName: "xmark")
            }
            )
            .navigationBarTitle("Settings", displayMode: .inline)
            .background(Color("ColorBackground").edgesIgnoringSafeArea(.all))

            
            
        } // End of Navigation View
        
        
    }
}
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search