SwiftUI中如何创建可与内容重叠的Inspector？

我完全懂你想要的效果——就像Xcode里的Inspector那样，从右侧滑出来时，只会把顶部的工具栏、导航面包屑这些辅助元素挤一挤，窗口空间不够时直接重叠在主内容上，而不是让核心的编辑区域被缩放挤压。默认的SwiftUI .inspector() 确实会把Inspector当成布局的一部分，强制调整父视图的空间，这点确实挺烦人的。

要实现重叠效果，核心思路是把Inspector从默认的布局流中抽离出来，让它作为一个覆盖层放在主内容之上，而不是和主内容共享布局空间。下面是具体的实现步骤和代码示例：

1. 用ZStack承载主内容和Inspector #

首先，我们可以用ZStack把主内容和自定义的Inspector放在同一个层级，这样Inspector就能直接叠加在主内容上，不会影响主内容的布局：

@State private var showInspector = false

NavigationSplitView {
    // 侧边栏内容，比如列表
    List(["项目1", "项目2", "项目3"], id: \.self) { item in
        NavigationLink(item, value: item)
    }
} detail: {
    ZStack(alignment: .trailing) {
        // 你的主内容区域，这里用ScrollView包裹Text示例
        ScrollView {
            Text("这是不会被Inspector压缩的主内容区域")
                .font(.largeTitle)
                .padding()
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        
        // 自定义的重叠Inspector
        if showInspector {
            InspectorView()
                .frame(width: 300) // 固定Inspector宽度，可按需调整
                .background(Color(.systemBackground))
                .shadow(color: .black.opacity(0.2), radius: 10)
                .transition(.move(edge: .trailing)) // 右侧滑入滑出的过渡动画
                .animation(.easeInOut(duration: 0.3), value: showInspector)
        }
    }
    .toolbar {
        // 控制Inspector显示/隐藏的按钮
        Button(action: { showInspector.toggle() }) {
            Image(systemName: "sidebar.right")
        }
    }
}

// 自定义Inspector视图示例
struct InspectorView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("Inspector标题")
                .font(.title2)
                .bold()
            Text("选中项的元数据")
            Text("更多上下文信息")
            Spacer()
        }
        .padding()
    }
}

2. 模拟Xcode的“挤压辅助元素”效果 #

如果你想要像Xcode那样，Inspector打开时只压缩顶部的工具栏、面包屑这些区域，而主内容保持不变，可以给这些辅助元素添加基于showInspector状态的布局调整：

detail: {
    VStack(spacing: 0) {
        // 顶部导航面包屑/工具栏区域
        HStack {
            Text("当前路径: 项目 > 文件")
            Spacer()
            Button("运行") {}
            Button("停止") {}
        }
        .padding()
        .frame(height: showInspector ? 40 : 60) // Inspector打开时缩小高度
        .background(Color(.secondarySystemBackground))
        .animation(.easeInOut, value: showInspector)
        
        // 主内容和Inspector的ZStack
        ZStack(alignment: .trailing) {
            // 主内容...
            // Inspector...
        }
        .frame(maxHeight: .infinity)
    }
}

3. 自适应窗口尺寸（可选） #

你还可以根据窗口宽度，让Inspector在“并排布局”和“重叠布局”之间自动切换——就像Xcode那样，窗口足够宽时并排显示，窗口变窄时切换为重叠模式：

detail: {
    GeometryReader { geometry in
        let isNarrowWindow = geometry.size.width < 1000 // 设定窗口宽度阈值
        ZStack(alignment: .trailing) {
            // 宽窗口时，主内容让出Inspector的宽度；窄窗口时占满整个宽度
            ScrollView {
                // 主内容...
            }
            .frame(width: isNarrowWindow ? nil : geometry.size.width - 300)
            
            if showInspector {
                InspectorView()
                    .frame(width: 300)
                    .background(Color(.systemBackground))
                    .shadow(color: .black.opacity(0.2), radius: 10)
                    // 宽窗口时无过渡动画，窄窗口时滑入滑出
                    .transition(isNarrowWindow ? .move(edge: .trailing) : .identity)
                    .animation(.easeInOut, value: showInspector)
            }
        }
    }
}

关键总结 #

系统默认的.inspector()是和布局系统绑定的，所以会强制调整父视图空间。要实现重叠效果，必须将Inspector作为独立的覆盖层，通过ZStack或overlay放在主内容之上，再配合状态变量和动画模拟系统Inspector的交互体验。

内容来源于stack exchange