使用表单 SwiftUI 的导航链接

Posted 2023-04-13

【中文标题】使用表单 SwiftUI 的导航链接

【英文标题】：Navigation Link Using a form SwiftUI

【发布时间】：2022-01-16 05:32:01

【问题描述】：

我想使用表单中的按钮移动到另一个视图，我正在尝试创建一个设置页面。 下面的代码，我管理了如何从表单打开一个 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
        
        
    

【问题讨论】：

欢迎来到 Stack Overflow！请拨打tour 并查看：How do I ask a good question? 和How to create a Minimal, Reproducible Example。您还应该通过Apple's SwiftUI Tutorials，因为它已广泛涵盖。

【参考方案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()
    

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

【讨论】：

不，我的朋友它没有用，请再看问题，我编辑了它，谢谢

【参考方案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