使用表单 SwiftUI 的导航链接

Question

我想使用表单中的按钮移动到另一个视图，我正在尝试创建一个设置页面。 下面的代码，我管理了如何从表单打开 URL，现在我想打开另一个页面，但我现在不知道该怎么做。

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

这就是设置视图的样子，我正在尝试编写一个按钮，以便用户可以点击它以移动到另一个页面，我尝试了很多代码，但没有运气

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

Answer 1

您可以使用

NavigationView

并且在其中您可以使用 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()
    }
}

我希望这有效！如果不起作用或错误，请发表评论。

Answer 2

如果你想呈现一个新屏幕，请像这样将 @State var 添加到你的内容视图中。

@State var isShowingSettingsScreen: Bool = false 

然后添加一个看起来像这样的按钮。

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

Answer 3

将

Form

包裹到

NavigationView

中，然后

NavigationLink

在里面工作。

struct SettingsView: View {

    var body: some View {
        NavigationView {
            Form {
                Section {
                    NavigationLink {
                        Text("Content Screen")
                    } label: {
                        Text("Content Button")
                    }
                }
            }
        }
    }
}