Any SwiftUI SplitView 3-pane examples for macOS?

Question

Created Jul ’20

Replies 4

Boosts 0

Views 4.1k

Participants 3

I am building a macOS app using SwiftUI.

I've seen examples of using a NavigationView to do a Mail-style 3 pane app.

In that case, there are two levels of master-detail so a NavigationView makes sense.
(Mailboxes List > Messages List > Message Detail)

I am trying to write a "Sidebar - Editor - Inspector" 3-pane app.

In that case, the sidebar is the master, and both the editor and the inspector are part of a detail view of the selected item in the sidebar. So, it makes sense to use a split view between the editor and the inspector.

Is there any sample code, tips, tricks, or anything at all demonstrating or describing how to get typical inspector behavior using HSplitView in a Mac app?

The single sentence of documentation describes what a split view is, but no info on strategies for how to use it well.

Thanks for any insights / anything at all really.

Boost

Answer 1

jlagrone OP

Jul ’20

I'm attempting something similar. Here's something basic I've come up with. It seems you can put multiple Views in the HSplitView (maybe up to 10?). I think you're supposed to get a toggle button to expose the sidebar for free, but I only see in it iPadOS, not macOS. See Hacking with Swift "how-to-add-a-sidebar-for-ipados".

Code Block struct MasterPane: View {    var body: some View {
        VStack {
            Text("Items")
            List(0..<16, id: \.self) { i in
                Text("Item \(i)")
            }
            .listStyle(SidebarListStyle())
            Spacer()
        }
        .frame( idealWidth: 250, maxWidth: 250, maxHeight: .infinity)
    }
}
struct DetailPane: View {
    var body: some View {
        Text("Details")
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .center)
    }
}
struct InspectorPane: View {
    var body: some View {
        VStack {
            Text("Inspector")
        }
        .padding()
        .frame( idealWidth: 250, maxWidth: 250, maxHeight: .infinity)
    }
}
struct ContentView: View {
    var body: some View {
        HSplitView {
            MasterPane()
            DetailPane()
            InspectorPane()
        }
    }
}

0

Answer 2

jlagrone OP

Jul ’20

Maybe this is better. Wrap View into a NavigationView.

Code Block struct ContentView: View {		var body: some View {
				NavigationView {
						MasterPane()
						HSplitView {
								DetailPane()
								InspectorPane()
						}
				}
		}
}

1

Answer 3

James Dempsey OP

Jul ’20

Thanks @jlagrone. Your second approach is what I was thinking of doing. Was hoping there was some sample code or hints from someone who was familiar with it. But I guess we'll just experiment and figure it out.

0

Answer 4

Muthu OP

Jun ’21

I'm in the exact same situation. Were you able to figure out the layout for this @James Dempsey? Sidebar works great but the DetailPane() and the InspectorPane() are split in the middle, even with a .fame modifier placed on the InspectorPane to fix it's width. Appreciate any pointers you can share.

0