Sidebar on the right in SwiftUI

Question

Created Jun ’21

Replies 2

Boosts 0

Views 3.5k

Participants 3

I developing a swiftUI app for macOS. I like the side bar very much. It shows up on the left and I can add a button to open and close it. All this is good. However, I also like a similar panel on the right, so it can serve as an 'inspector' to the content I am editing.

It looks like a right sidebar may not be supported in SwiftUI. So, I tried the following:

NavigationView() {
    // Sidebar
    VStack(alignment: .leading) {
        // My sidebar views here
    }
    .frame(minWidth: 200, idealWidth: 220, maxWidth: 240)
    
    // Main Content
    VStack {
        ScrollView {
            LazyVGrid() {
                // My Grid view here
            }
        }
    }
    
    // Inspector View
    VStack(alignment: .leading) {
        // Inspector views here
    }
    .frame(minWidth: 200, idealWidth: 220, maxWidth: 240)   
}

My desire was for the Inspector view will be snapped to the right and the main content to fill the center space. The above layout doesn't do that. Instead, the inspector view appears much wider and the main content shrunk.

I can use the divider to resize it accoding to my need. But would love for it to appear as desired on startup.

Is there any other way or workaround I can explore to achieve this?

Boost

Answer 1

cpayn OP

Jun ’21

Also looking for something like this myself. I'm trying to attain the same kind of right hand collapsible sidebar as is used in Xcode.

0

Answer 2

Wouter01 OP

Aug ’21

Hey,

Not sure if you found your answer yet, but you might be able to achieve that with Introspect. This library lets you interact with the AppKit/UIKit framework that SwiftUI uses.

I'm assuming you are not using an Catalyst app, so you would be looking at the AppKit functionality. As you can see on the GitHub page, NSSplitViewController is not implemented in the library yet, however, UISplitViewController is.

If you are using Catalyst, you can just write

NavigationView {
// Your views here
}
.introspectSplitViewController { controller in
      // some examples
      controller.preferredSupplementaryColumnWidthFraction = 3
      controller.preferredPrimaryColumnWidth = 180
      controller.preferredDisplayMode = .twoBesideSecondary
      controller.presentsWithGesture = false
}

You can set the width of each column as you wish.

1st column = Primary

2nd column = Supplementary

3rd column = Secondary

You can use preferredcolumnColumnWidth for an exact width, or preferredcolumnColumnWidthFraction for a portion of your view. 1 is the standard size the column would get, 0.5 is half, ...

If you are not using Catalyst, you could try to implement your own selector for Introspect (see bottom of GitHub page) to access the NSSplitViewController. I assume it does have similar variables to control the width, although they might be called different.

If you want to go this route, Apple's documentation might help.

Best of luck!

0