如何避免 SwiftUI 中的嵌套导航栏? [英] How can I avoid nested Navigation Bars in SwiftUI?

问题描述

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

Using SwiftUI, I've built a NavigationView that takes the user to another NavigationView, and finally, to a simple View. When I get to the last view, I can see two back buttons and a very large Navigation Bar.

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

I'd like to have a navigation structure similar to the iOS Settings app, where one navigation list takes to another and each of them have one back button that goes back to the previous screen.

有人知道如何解决这个问题吗?

Does anyone know how to solve this?

推荐答案

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

You should only have one NavigationView in your view hierarchy, as an ancestor of the menu view. You can then use NavigationLinks at any level of the hierarchy under that.

例如，您的根视图可以这样定义:

So, for example, your root view could be defined like this:

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

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

然后你的菜单视图有 NavigationLink 到适当的视图:

Then your menu view has NavigationLinks to the appropriate views:

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

您的约会列表视图还包含约会详细信息视图的NavigationLink:

Your appointment list view also contains NavigationLinks to the appointment detail views:

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

结果:

这篇关于如何避免 SwiftUI 中的嵌套导航栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！