SwiftUI如何将ViewBuilder传入父视图RouterView以显示子视图模态？

核心思路 #

把模态的显示状态统一托管到RouterViewModel中，通过单向数据流控制模态的展示，避免子视图直接操作父视图的视图结构，符合MVVM的职责分离原则。

具体实现步骤 #

1. 扩展路由枚举，新增模态类型 #

在原有的页面枚举外，新增一个枚举定义所有可能的模态场景：

enum RouterPage {
    case login
    case companySelect
    // 其他页面类型
}

enum RouterModal: Identifiable { // 遵循Identifiable，方便与sheet绑定
    case forgotPassword
    case companyDetail
    // 其他模态类型
    
    var id: Self { self } // 用自身作为唯一标识
}

2. 更新RouterViewModel，添加模态状态 #

在视图模型中添加@Published修饰的属性，用来控制当前显示的模态：

class RouterViewModel: ObservableObject {
    @Published var currentPage: RouterPage = .login
    @Published var currentModal: RouterModal? // 可选类型，nil时隐藏模态
}

3. 修改RouterView，根据状态渲染模态 #

在RouterView的body中，通过模态容器（如sheet/fullScreenCover）绑定currentModal，根据枚举值渲染对应模态视图：

struct RouterView: View {
    @EnvironmentObject var routerViewModel: RouterViewModel
    
    var body: some View {
        // 主页面切换逻辑
        Group {
            switch routerViewModel.currentPage {
            case .login:
                LoginView()
                    .transition(.scale)
            case .companySelect:
                CompanySelectView()
                    .transition(.scale)
            // 其他页面的case分支
            }
        }
        // 模态视图渲染
        .sheet(item: $routerViewModel.currentModal) { modal in
            switch modal {
            case .forgotPassword:
                ForgotPasswordView()
            case .companyDetail:
                CompanyDetailView()
            // 对应其他模态的视图
            }
        }
    }
}

4. 子视图触发模态显示 #

子视图通过@EnvironmentObject获取RouterViewModel，在交互事件中修改currentModal的值即可触发模态：

struct LoginView: View {
    @EnvironmentObject var routerViewModel: RouterViewModel
    
    var body: some View {
        VStack {
            // 登录表单内容...
            
            Button("忘记密码？") {
                routerViewModel.currentModal = .forgotPassword
            }
        }
    }
}

方案优势（符合MVVM原则） #

• 状态集中管理：页面切换、模态显示的状态都统一在RouterViewModel中，保证单一数据源，避免状态分散混乱。
• 视图与逻辑分离：子视图只负责触发状态变化，不直接控制视图层级；RouterView只负责根据ViewModel状态渲染视图，职责边界清晰。
• 单向数据流：状态变化从子视图传递到ViewModel，再由ViewModel驱动视图更新，符合SwiftUI声明式编程风格，避免了OOP中父视图依赖子视图实现的耦合问题。

内容的提问来源于stack exchange，提问作者filip.karas