SwiftUI多平台应用：区分iPhone与Mac/iPad视图的判断代码是否正确？

你的判断逻辑基本能实现iPhone竖屏显示TabView、iPad/Mac显示NavigationSplitView的需求，但存在几个需要修正的问题：

1. 横屏iPhone的布局逻辑（可选调整） #

当前条件hSizeClass == .compact && vSizeClass == .regular仅匹配iPhone竖屏状态。如果你的需求是所有iPhone状态（包括横屏）都用TabView，那这个条件就不够了——iPhone横屏时hSizeClass会变成.regular，vSizeClass变成.compact，会进入else分支显示SplitView，这可能不符合预期。

如果要让所有iPhone都用TabView，可以改用平台判断结合尺寸类：

if UIDevice.current.userInterfaceIdiom == .phone {
    // 所有iPhone显示TabView
} else {
    // iPad/Mac显示SplitView
}

或者保留尺寸类判断，调整条件覆盖iPhone横屏：

if (hSizeClass == .compact && vSizeClass == .regular) || (hSizeClass == .regular && vSizeClass == .compact) {
    // iPhone横竖屏都显示TabView
}

2. TabView中共享NavigationPath的问题 #

你给两个Tab里的NavigationStack都绑定了同一个@State private var path，这会导致切换Tab时，两个页面的导航栈互相干扰。比如在HomeView里跳转到子页面，切换到SettingsTab后，SettingsView的导航栈也会处于相同的路径位置，这显然不是预期行为。

解决方法是给每个Tab单独维护导航路径：

@State private var homePath = NavigationPath()
@State private var settingsPath = NavigationPath()

// 在TabView中分别绑定
NavigationStack(path: $homePath) {
    HomeView()
    // ...
}

NavigationStack(path: $settingsPath) {
    SettingsView()
    // ...
}

3. NavigationSplitView的detail视图缺失实现 #

当前else分支的detail部分只是注释了// shows view depending on selection，需要补充根据selection展示对应视图的逻辑，比如：

NavigationStack(path: $path) {
    switch selection {
    case .home:
        HomeView()
    case .settings:
        SettingsView()
    case nil:
        Text("请选择一个选项")
    }
}

优化后的完整代码示例 #

enum Panel: Hashable {
    case home
    case settings
}

struct ContentView: View {
    @Environment(.horizontalSizeClass) var hSizeClass
    @Environment(.verticalSizeClass) var vSizeClass
    
    @State private var homePath = NavigationPath()
    @State private var settingsPath = NavigationPath()
    @State private var splitPath = NavigationPath()
    @State private var selection: Panel? = .home
    
    var body: some View {
        Group {
            // 匹配所有iPhone横竖屏状态
            if (hSizeClass == .compact && vSizeClass == .regular) || (hSizeClass == .regular && vSizeClass == .compact) {
                TabView {
                    NavigationStack(path: $homePath) {
                        HomeView()
                            .tabItem {
                                Label("首页", systemImage: "home")
                            }
                    }
                    
                    NavigationStack(path: $settingsPath) {
                        SettingsView()
                            .tabItem {
                                Label("设置", systemImage: "gear")
                            }
                    }
                }
            } else {
                NavigationSplitView {
                    Sidebar(selection: $selection)
                } detail: {
                    NavigationStack(path: $splitPath) {
                        switch selection {
                        case .home:
                            HomeView()
                        case .settings:
                            SettingsView()
                        case nil:
                            Text("请选择功能")
                        }
                    }
                }
            }
        }
    }
}

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