如何避免 SwiftUI 中的嵌套导航栏？答案

【问题标题】：How can I avoid nested Navigation Bars in SwiftUI?如何避免 SwiftUI 中的嵌套导航栏？
【发布时间】：2019-11-27 20:14:34
【问题描述】：

使用 SwiftUI，我构建了一个 NavigationView，它将用户带到另一个 NavigationView，最后是一个简单的 View。当我到达最后一个视图时，我可以看到两个后退按钮和一个非常大的导航栏。

我想要一个类似于 iOS 设置应用程序的导航结构，其中一个导航列表转到另一个导航列表，每个导航列表都有一个返回按钮，可以返回到上一个屏幕。

有人知道怎么解决吗？

【问题讨论】：

标签： swift xcode swiftui

【解决方案1】：

您的视图层次结构中应该只有一个NavigationView，作为菜单视图的祖先。然后，您可以在其下的任何层次结构级别使用NavigationLinks。

因此，例如，您的根视图可以这样定义：

struct RootView: View {
    var body: some View {
        NavigationView {
            MenuView()
                .navigationBarItems(trailing: profileButton)
        }
    }

    private var profileButton: some View {
        Button(action: { }) {
            Image(systemName: "person.crop.circle")
        }
    }
}

然后你的菜单视图有NavigationLinks 到适当的视图：

struct MenuView: View {
    var body: some View {
        List {
            link(icon: "calendar", label: "Appointments", destination: AppointmentListView())
            link(icon: "list.bullet", label: "Work Order List", destination: WorkOrderListView())
            link(icon: "rectangle.stack.person.crop", label: "Contacts", destination: ContactListView())
            link(icon: "calendar", label: "My Calendar", destination: MyCalendarView())
        }.navigationBarTitle(Text("Menu"), displayMode: .large)
    }

    private func link<Destination: View>(icon: String, label: String, destination: Destination) -> some View {
        return NavigationLink(destination: destination) {
            HStack {
                Image(systemName: icon)
                Text(label)
            }
        }
    }
}

您的约会列表视图还包含NavigationLinks 到约会详细视图：

struct AppointmentListView: View {
    var body: some View {
        List {
            link(destination: AppointmentDetailView())
            link(destination: AppointmentDetailView())
            link(destination: AppointmentDetailView())
        }.navigationBarTitle("Appointments")
    }

    private func link<Destination: View>(destination: Destination) -> some View {
        NavigationLink(destination: destination) {
            AppointmentView()
        }
    }
}

结果：

【讨论】：

Rob，你既是天使又是天才！非常感谢您的帮助！
当我从NavigationLink 中推送一个新的List 时，我的模拟器/画布冻结，该List 已经在List 中，并且没有抛出任何错误。有没有其他人遇到过这个问题？我已经克隆了上面的代码，但仍然遇到同样的问题。
是的，我确实遇到了同样的冻结问题。你解决了吗？
@IronJohnBonney 我也遇到了这个问题，这太令人沮丧了。你找到工作了吗？
@Spood 我确实找到了解决方法。我认为这与我在 AppDelegate 中自定义 UINavigationBar 的外观，然后在提到的列表中推送列表有关。一旦我摆脱了外观定制，我就没有问题了。我最终不得不在 SwiftUI 代码中的其他地方自定义外观。我会仔细检查以确保这是我遇到的问题，目前正在记忆中。

【解决方案2】：

如果您使用 NavigationLinks 创建菜单视图但未在 NavigationView 中声明它，您将获得没有 NavigationBar 的子视图。

【讨论】：