如何判断SwiftUI视图是否以侧边栏形式展示？

NavigationSplitViewVisibility的.automatic状态无法区分设备处于全屏双栏、分屏折叠、Slide Over或iPhone单栏的情况——它仅响应用户手动切换侧边栏的操作，而非自动布局变化。以下是两种可行的解决方法：

方法一：结合水平尺寸类与容器宽度判断 #

利用SwiftUI的horizontalSizeClass环境变量，配合GeometryReader获取容器实际宽度，综合判断是否有足够空间显示双栏：

struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @State private var columnVisibility: NavigationSplitViewVisibility = .automatic
    @State private var isDualColumn = false
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            SidebarView(isDualColumn: isDualColumn)
        } detail: {
            DetailView()
        }
        .overlay(
            GeometryReader { proxy in
                Color.clear
                    .onAppear {
                        updateDualColumnStatus(width: proxy.size.width)
                    }
                    .onChange(of: proxy.size.width) { newWidth in
                        updateDualColumnStatus(width: newWidth)
                    }
            }
        )
    }
    
    private func updateDualColumnStatus(width: CGFloat) {
        // 可根据产品需求调整宽度阈值，iPad全屏宽度通常≥1024
        let isRegularSizeClass = horizontalSizeClass == .regular
        let hasEnoughWidth = width >= 1024
        
        isDualColumn = isRegularSizeClass && hasEnoughWidth
    }
}

struct SidebarView: View {
    let isDualColumn: Bool
    
    var body: some View {
        if isDualColumn {
            // 双栏模式侧边栏：紧凑列表布局
            List {
                Text("菜单1")
                Text("菜单2")
                Text("菜单3")
            }
            .navigationTitle("侧边栏")
        } else {
            // 单栏模式侧边栏：宽松按钮布局
            VStack(spacing: 20) {
                Text("导航")
                    .font(.title)
                Button("菜单1") {}
                    .buttonStyle(.borderedProminent)
                Button("菜单2") {}
                    .buttonStyle(.borderedProminent)
                Button("菜单3") {}
                    .buttonStyle(.borderedProminent)
            }
            .padding()
        }
    }
}

方法二：自定义环境键传递双栏状态 #

将判断逻辑抽离为自定义环境键，方便在任意子视图中直接访问状态：

// 自定义环境键
private struct IsDualColumnKey: EnvironmentKey {
    static let defaultValue = false
}

extension EnvironmentValues {
    var isDualColumn: Bool {
        get { self[IsDualColumnKey.self] }
        set { self[IsDualColumnKey.self] = newValue }
    }
}

struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @State private var isDualColumn = false
    
    var body: some View {
        NavigationSplitView {
            SidebarView()
        } detail: {
            DetailView()
        }
        .environment(\.isDualColumn, isDualColumn)
        .overlay(
            GeometryReader { proxy in
                Color.clear
                    .onChange(of: proxy.size.width) {
                        isDualColumn = horizontalSizeClass == .regular && $0 >= 1024
                    }
            }
        )
    }
}

struct SidebarView: View {
    @Environment(\.isDualColumn) private var isDualColumn
    
    var body: some View {
        // 根据isDualColumn调整侧边栏样式，逻辑同方法一
    }
}

关键说明 #

• 宽度阈值可根据实际需求调整，比如iPad分屏的最小双栏宽度为834，可根据产品设计灵活设定。
• 结合horizontalSizeClass是为了避免iPhone横屏（可能触发regular尺寸类）时误判为双栏模式。
• 监听容器宽度变化能响应分屏、Slide Over等系统自动布局切换，这是NavigationSplitViewVisibility无法覆盖的场景。

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