iOS 16 SwiftUI多模块复杂导航数据模型设计方案咨询

针对iOS 16+ SwiftUI新导航API下的多模块、多类型页面导航需求，推荐采用枚举路由+可观察状态管理器的方案，完美适配NavigationSplitView三栏布局，同时支持复杂多级导航。

核心思路 #

用枚举封装所有页面路由（包含两个模块的所有层级页面），通过关联值传递页面所需参数；用可观察对象统一管理导航状态（当前选中的详情页路由、模块内的导航栈），实现完全的数据驱动导航。

具体实现步骤 #

1. 定义全局路由枚举 #

将「Fruit Store」和「Recipes」模块的所有页面纳入同一个枚举，通过关联值携带页面参数：

enum AppRoute: Hashable {
    // Fruit Store模块路由
    case fruitStoreHome
    case fruitDetail(fruitID: String)
    case fruitReviewList(fruitID: String)
    case fruitReviewDetail(reviewID: String)
    
    // Recipes模块路由
    case recipesHome
    case recipeDetail(recipeID: String)
    case recipeStepDetail(recipeID: String, stepIndex: Int)
    case recipeIngredientList(recipeID: String)
}

2. 实现导航状态管理器 #

用ObservableObject统一管理导航状态，适配三栏布局的详情页选中状态，以及模块内的多级导航栈：

import SwiftUI

class NavigationManager: ObservableObject {
    // 三栏布局的详情页当前路由
    @Published var selectedDetailRoute: AppRoute?
    
    // Fruit Store模块的导航栈
    @Published var fruitStoreNavigationStack: [AppRoute] = []
    // Recipes模块的导航栈
    @Published var recipesNavigationStack: [AppRoute] = []
    
    // 重置模块导航栈
    func resetStack(for route: AppRoute) {
        switch route {
        case .fruitStoreHome, .fruitDetail, .fruitReviewList, .fruitReviewDetail:
            fruitStoreNavigationStack = []
        case .recipesHome, .recipeDetail, .recipeStepDetail, .recipeIngredientList:
            recipesNavigationStack = []
        }
    }
}

3. 构建NavigationSplitView布局 #

三栏布局分别对应：侧边栏（模块入口）、内容栏（模块内列表）、详情栏（当前选中页面），通过导航状态动态渲染内容：

struct MainView: View {
    @StateObject private var navManager = NavigationManager()
    
    var body: some View {
        NavigationSplitView {
            // 侧边栏：模块入口
            List {
                Button("Fruit Store") {
                    navManager.selectedDetailRoute = .fruitStoreHome
                    navManager.resetStack(for: .fruitStoreHome)
                }
                Button("Recipes") {
                    navManager.selectedDetailRoute = .recipesHome
                    navManager.resetStack(for: .recipesHome)
                }
            }
            .navigationTitle("Modules")
        } content: {
            // 内容栏：根据当前模块渲染列表
            if let route = navManager.selectedDetailRoute {
                switch route {
                case .fruitStoreHome:
                    FruitStoreHomeView(navManager: navManager)
                case .recipesHome:
                    RecipesHomeView(navManager: navManager)
                default:
                    EmptyView()
                }
            } else {
                Text("Select a module")
            }
        } detail: {
            // 详情栏：根据当前路由渲染对应页面
            if let route = navManager.selectedDetailRoute {
                RouteView(route: route, navManager: navManager)
            } else {
                Text("Select an item")
            }
        }
    }
}

4. 路由页面渲染器 #

单独封装一个View用于匹配路由并渲染对应页面，避免主布局代码臃肿：

struct RouteView: View {
    let route: AppRoute
    @ObservedObject var navManager: NavigationManager
    
    var body: some View {
        switch route {
        case .fruitStoreHome:
            Text("Fruit Store Home")
        case .fruitDetail(let fruitID):
            FruitDetailView(fruitID: fruitID, navManager: navManager)
        case .fruitReviewList(let fruitID):
            FruitReviewListView(fruitID: fruitID, navManager: navManager)
        case .fruitReviewDetail(let reviewID):
            FruitReviewDetailView(reviewID: reviewID)
            
        case .recipesHome:
            Text("Recipes Home")
        case .recipeDetail(let recipeID):
            RecipeDetailView(recipeID: recipeID, navManager: navManager)
        case .recipeStepDetail(let recipeID, let stepIndex):
            RecipeStepDetailView(recipeID: recipeID, stepIndex: stepIndex)
        case .recipeIngredientList(let recipeID):
            RecipeIngredientListView(recipeID: recipeID)
        }
    }
}

5. 模块内多级导航实现 #

以Fruit Store模块为例，在列表页中使用NavigationStack绑定模块专属的导航栈，实现多级跳转：

struct FruitStoreHomeView: View {
    @ObservedObject var navManager: NavigationManager
    
    // 模拟水果列表数据
    let fruits = ["Apple", "Banana", "Orange"].enumerated().map { ($0.offset.description, $0.element) }
    
    var body: some View {
        NavigationStack(path: $navManager.fruitStoreNavigationStack) {
            List(fruits, id: \.0) { fruitID, name in
                Button(name) {
                    navManager.selectedDetailRoute = .fruitDetail(fruitID: fruitID)
                    navManager.fruitStoreNavigationStack.append(.fruitDetail(fruitID: fruitID))
                }
            }
            .navigationTitle("Fruits")
            .navigationDestination(for: AppRoute.self) { route in
                RouteView(route: route, navManager: navManager)
            }
        }
    }
}

// 水果详情页示例：跳转至评论列表
struct FruitDetailView: View {
    let fruitID: String
    @ObservedObject var navManager: NavigationManager
    
    var body: some View {
        VStack {
            Text("Fruit Detail: \(fruitID)")
            Button("View Reviews") {
                navManager.selectedDetailRoute = .fruitReviewList(fruitID: fruitID)
                navManager.fruitStoreNavigationStack.append(.fruitReviewList(fruitID: fruitID))
            }
        }
        .navigationTitle("Fruit Detail")
    }
}

方案优势 #

• 类型安全：枚举路由确保页面跳转无类型错误，关联值明确参数要求
• 可扩展性：新增页面只需在枚举中添加case，无需修改导航核心逻辑
• 模块化管理：每个模块的导航栈独立，避免模块间状态干扰
• 适配三栏布局：通过selectedDetailRoute精准控制详情页内容，符合NavigationSplitView的设计逻辑

内容的提问来源于stack exchange，提问作者wheatset