Three Column Editors in SwiftUI on macOS
In this post, we will learn how to create a customizable three-column editor layout in SwiftUI for macOS, similar to those found in productivity apps like Xcode, Figma, Keynote, and Sketch. Although SwiftUI’s NavigationSplitView supports a three-column mode, it doesn’t quite fit the needs of a three-column editor style UI. We will explore how to set up the layout using NavigationSplitView and HSplitView to achieve the desired outcome. A typical three-column layout consists of a Navigator for selecting objects or entities, a Canvas for displaying the current state of a project, and an Inspector for viewing more details and changing specific values of the selected item. Users should be able to collapse and expand each column to manage screen space efficiently. ...