SwiftUI macOS 右侧边栏检查器

Question

我有一个基于文档的SwiftUI应用程序。我想制作一个类似Xcode中的检查器侧边栏。

从Xcode的文档应用程序模板开始，我尝试了以下操作：

struct ContentView: View {
    @Binding var document: DocumentTestDocument
    @State var showInspector = true

    var body: some View {
        HSplitView {
            TextEditor(text: $document.text)
            if showInspector {
                Text("Inspector")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
        }
        .toolbar {
            Button(action: { showInspector.toggle() }) {
                Label("Toggle Inspector", systemImage: "sidebar.right")
            }
        }
    }
}

导致如下结果:

如何像Xcode一样将右侧边栏扩展到完整高度?

NavigationView适用于左侧边栏，但我不确定如何对右侧边栏进行操作。

- Taylor

---

你找到解决方案了吗？ - emreoktem

@emreoktem 还没有。 - Taylor

Answer 1

以下是我过去使用过的一些简化代码，它具有您想要的外观和感觉。

它使用带有 .navigationViewStyle(.columns) 的 NavigationView，基本上有三个窗格。此外，HiddenTitleBarWindowStyle() 非常重要。

第一个（导航）窗格从未给出任何宽度，因为第二个（详细信息）窗格总是在没有检查器时被赋予整个宽度，或者在检查器存在时减去检查器的宽度。工具栏需要分解并且其内容需要根据检查器是否存在而放置在不同位置。

@main
struct DocumentTestDocumentApp: App {
    var body: some Scene {
        DocumentGroup(newDocument: DocumentTestDocument()) { file in
            ContentView(document: file.$document)
        }
        .windowStyle(HiddenTitleBarWindowStyle())
    }
}

struct ContentView: View {
    @Binding var document: DocumentTestDocument
    @State var showInspector = true
    var body: some View {
        GeometryReader { window in
            if showInspector {
                NavigationView {
                    TextEditor(text: $document.text)
                        .frame(minWidth: showInspector ? window.size.width - 200.0 : window.size.width)
                        .toolbar {
                            LeftToolBarItems(showInspector: $showInspector)
                        }
                    Inspector()
                        .toolbar {
                            RightToolBarItems(showInspector: $showInspector)
                        }
                }
                .navigationViewStyle(.columns)
            } else {
                NavigationView {
                    TextEditor(text: $document.text)
                        .frame(width: window.size.width)
                        .toolbar {
                            LeftToolBarItems(showInspector: $showInspector)
                            RightToolBarItems(showInspector: $showInspector)
                        }
                }
                .navigationViewStyle(.columns)
            }
        }
    }
}

struct LeftToolBarItems: ToolbarContent {
    @Binding var showInspector: Bool
    var body: some ToolbarContent {
        ToolbarItem(content: { Text("test left toolbar stuff") } )
    }
}

struct RightToolBarItems: ToolbarContent {
    @Binding var showInspector: Bool
    var body: some ToolbarContent {
        ToolbarItem(content: { Spacer() } )
        ToolbarItem(placement: .primaryAction) {
            Button(action: { showInspector.toggle() }) {
                Label("Toggle Inspector", systemImage: "sidebar.right")
            }
        }
    }
}

struct Inspector: View {
    var body: some View {
        VStack {
            Text("Inspector Top")
            Spacer()
            Text("Bottom")
        }
    }
}

- Chuck H

---

我刚想到了一个稍微不同的方法，可以解决工具栏问题和奇怪的动画。我将编辑上面的内容以反映新的方法。 - Chuck H

Answer 2

尽管仍处于测试阶段，但SwiftUI很快将与iOS 17、tvOS 17和macOS 14一同发布。SwiftUI将提供这种类型的检查器：

ContentView()
    .inspector($showInspector) {
        InspectorView()
    }

这是来自WWDC23的视频：https://developer.apple.com/videos/play/wwdc2023/10161 还有一个文档链接：https://developer.apple.com/documentation/corelocationui/locationbutton/4200336-inspector/

- Ribena