从一个 SwiftUI 视图移动到另一个

Posted 2023-02-24

【中文标题】从一个 SwiftUI 视图移动到另一个

【英文标题】：Moving from one SwiftIUI view to another

【发布时间】：2021-01-23 18:42:14

【问题描述】：

我是应用程序开发的新手，我正在构建一个需要跨不同视图移动的应用程序。

目前，我正在使用 NavigationView/链接设置，但这意味着每次我将 NavigationView 放置在具有 NavigationView 的不同视图中时，视图的大小会变小，并且我会留下多个返回按钮.

有没有办法避免这种情况（在不使用导航系统的情况下更改 SwiftUI 中的视图的不同方法？）

【问题讨论】：

您需要发布代码。没有它，没有人可以明确诊断问题。请查看How to create a Minimal, Reproducible Example，以便从您的问题中获得最大收益。

【参考方案1】：

您应该在您的应用程序中只使用一个NavigationView。例如，在应用的主屏幕上？

NavigationLink 将您的用户引导至一个不应具有NavigationView 视图的新视图。添加两个 NavigationViews 并将它们链接在一起将导致您描述的行为，即通过将一个 NavigationView 推入另一个缩小内部所有其他视图（和它们自身）。

尝试将所有 NavigationView 组件从除主视图/根视图之外的所有其他视图中移除。

例如：

struct ROOT_VIEW: View 
    var body: some View 
        NavigationView 
            VStack 
                NavigationLink(destination: SECONDVIEW()) 
                    Text("Show Detail View")
                .navigationBarTitle("ROOT VIEW")
            
        
    

链接到第二个视图（所有其他视图）：

struct SECOND_VIEW: View 
    var body: some View 
            VStack 
                Text("This is the second view")
                .navigationBarTitle("ROOT VIEW", display: .inline)
            
        
    

只有将.navigationBarTitle("ROOT VIEW", display: .inline) 添加到您的第二个视图才能让标题出现在顶部（带有一个后退按钮）。您还可以在每个标题栏内添加按钮：

.navigationBarItems(leading:
       // FAR LEFT SIDE OF THE TITLE BAR
        HStack 
            Button(action: // action goes here) 
                Image(systemName: "plus")
                    .font(.largeTitle)
            .foregroundColor(.pink)
        , trailing:
       // FAR RIGHT SIDE OF THE TITLE BAR
        HStack 
            Button(action:  //action goes here) 
                Image(systemName: "plus")
                    .font(.largeTitle)
            .foregroundColor(.blue)
        )

另一种选择：

您无需使用NavigationViews，即可在您的应用之间引导用户。你可以使用简单的Boolean states。

例如，假设您有一个根视图屏幕，屏幕上有三个按钮，一个用于登录，一个用于注册，一个用于重置密码，每个按钮都有自己的视图。您只会根据布尔值显示一个视图：

struct ROOT_VIEW: View 

    @State var showLogin = true // This will be the default view that gets showed as its default to true
    @State var showRegister = false
    @State var showPasswordReset = false


    var body: some View 
        VStack
            if showLogin
                LoginView(showLogin: $showLogin, showRegister: $showRegister)
            
            if showRegister
                RegisterView()
            
            if showPasswordReset
                PasswordResetView()
            
        
    



struct LoginView: View 

    @Binding var showLogin: Bool
    @Binding var showRegister: Bool


    var body: some View 
        VStack
            Button(action: 
                // Change two bool values to switch to register view (turning off login view and turning on reigster view)
                showLogin.toggle()
                showRegister.toggle()
            ) 
                Text("Show Register")
            .foregroundColor(.pink)
        
    

您可以对您希望用户访问的所有视图执行此操作（显然）。假设您只希望RegisterView 只能转到LoginView，反之亦然，您只需在根视图中为RegisterView 提供showLogin 和showRegister 绑定布尔值如图：

RegisterView(showLogin: $showLogin, showRegister: $showRegister)

确保在您的寄存器视图中，您不使用普通的@State，而是使用@Binding 来跨视图同步所有布尔值。

【讨论】：

谢谢，但我使用导航视图从主屏幕 (contentview) 转到登录页面，效果很好。但我还需要从登录页面更改为不同的视图，然后从该视图更改为另一个...如果有不同的方式来更改视图，我不会有问题。

让我在不使用 NavigationViews 的情况下为您添加另一个选项。

我在一个新项目中进行了尝试，它看起来很棒，但是在底部的 LogInView 预览部分中，我收到一条错误消息“缺少参数 'showLogin'、'showRegister' 在调用中的参数” .

感谢您迄今为止的帮助！

因为您需要使用默认值提供预览值（只是显示您可以看到预览）