NavigationSplitView Collapse Button

Hi,

When creating a 3 columns Split View in SwiftUI the second view that resemble the mails list in Apple Mails App have a blue icon at top left corner where when tapped shows the column of Mail boxes such as Inbox, Sent etc.

This icon by default when creating the Split View disappears after tapping, it shows the third column and disappear , I would like it to stay so I can show and collapse the first column sam as Apple Mail App. how to do that ? its called back also how to rename it and add icon to it ?

Answered by Vision Pro Engineer in 773243022

Hi @Ammar S. Mittori,

The way that mail works on my iPad is that it shows two columns at first, and when you press the button to expand to three columns, that button disappears. To go back to the two column view, you click on the rightmost detail column and it will collapse.

If you do want to show a button to collapse the third column, you can try code like this:

struct ContentView: View {
    @State private var columnVisibility: NavigationSplitViewVisibility = .all
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            Text("Column 1")
        } content: {
            Text("Column 2")

                .toolbar {
                    Group {
                        if columnVisibility == .all {

                            ToolbarItem(placement: .navigation) {
                                Button("Back"){
                                    columnVisibility = .doubleColumn
                                }
                            }
                        }
                    }
                }
        } detail: {
            Text("Column 3")
        }
    }
}

This code sets a variable for the column visibility to be all the columns, and then changes that variable to just two columns when the back button is clicked. I also have it conditionally showing the button for when all three columns are showing

Accepted Answer

Hi @Ammar S. Mittori,

The way that mail works on my iPad is that it shows two columns at first, and when you press the button to expand to three columns, that button disappears. To go back to the two column view, you click on the rightmost detail column and it will collapse.

If you do want to show a button to collapse the third column, you can try code like this:

struct ContentView: View {
    @State private var columnVisibility: NavigationSplitViewVisibility = .all
    
    var body: some View {
        NavigationSplitView(columnVisibility: $columnVisibility) {
            Text("Column 1")
        } content: {
            Text("Column 2")

                .toolbar {
                    Group {
                        if columnVisibility == .all {

                            ToolbarItem(placement: .navigation) {
                                Button("Back"){
                                    columnVisibility = .doubleColumn
                                }
                            }
                        }
                    }
                }
        } detail: {
            Text("Column 3")
        }
    }
}

This code sets a variable for the column visibility to be all the columns, and then changes that variable to just two columns when the back button is clicked. I also have it conditionally showing the button for when all three columns are showing

Aha, thanks allot .

Hi,

I tried the code it works, expect one thing, the default back button shows as well, how can we remove it ?

Kindest Regards

NavigationSplitView Collapse Button
 
 
Q