如何避免在SwiftUI中嵌套导航栏？

Question

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

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

有人知道如何解决吗？

Answer 1

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

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

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到相应的视图：

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到约会详细信息视图：

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

结果：

Answer 2

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