NavigationSplitView: Hide detail column in a three-column view

223 views Asked by At

I am creating a macOS app using SwiftUI, creating a three-column layout with NavigationSplitView. It seems that the sidebar (or first column, or leading column) is able to be hidden by default. I would like to have the option to hide the detail column (or third column, or trailing column) as well, which I have seen in many macOS apps (even in Xcode itself).
Apple's documentation only seems to have NavigationSplitView configuration to hide the sidebar or sidebar+content columns, but not detail column.

This is my current code, where I have created a toolbar button which hides the content of the detail view:

import SwiftUI

struct NavigationView: View {
    @State private var detailViewVisible: Bool = true
    
    var body: some View {
        NavigationSplitView {
            Text("Sidebar")
        } content: {
            Text("Content")
        } detail: {
            if detailViewVisible {
                Text("Detail")
            } else {
                EmptyView()
            }
        }
        .toolbar {
            ToolbarItem(placement: .primaryAction) {
                Button(action: {
                    detailViewVisible.toggle()
                }) {
                    Image(systemName: "sidebar.right")
                }
            }
        }
    }
}

This empties out the contents of the detail view column, but the column itself remains.

I have also tried setting the width of that column to 0, which doesn't seem to do anything either.

0

There are 0 answers