This is an overview of SwiftUI components used in the Garden App that is the topic of the two WWDC21 talks on "SwiftUI on the Mac". For more information, watch the videos and download the source code in the links below.

SwiftUI on the Mac: Build the fundamentals

Video, sample code and transcript : https://developer.apple.com/videos/play/wwdc2021/10062/

Two column layout with sidebar and main content

NavigationView() for a two-column layout (sidebar and content)

Label(_:systemImage:) for the list items with images

DisclosureGroup() for subheaders in a list that can show and hide the items underneath

@SceneStorage() to persist values for a scene

List(selection:) to select an item in the list that should be displayed in the main content view

navigationTitle(_:), navigationSubtitle(_:)

Table

Table(_:selection:sortOrder:columns:) for a table with row selection and sorting per column

TableColumn(_:value:), TableColumn(_:value:content) to specify columns and how to display values

Toolbar with buttons and search field

toolbar(content:) add a toolbar for example with buttons

searchable(text:) add a search field

Command menu

commands(content:) add menu items

SidebarCommands() A built-in set of commands for manipulating window sidebars.

@FocusedBinding and focusedSceneValue(_:_:) to know which view is the focused one for commands

CommandGroup(before:addition:) placement of commands in the menu

CommandMenu(_:content:)

SwiftUI on the Mac: The finishing touches

Video, sample code and transcript : https://developer.apple.com/videos/play/wwdc2021/10289/

Create a settings window

Accent color that is used by default for label images etc

Settings scene to create a settings window and menu item with keyboard shortcut

TabView

Form with a Picker

@AppStorage to persist settings in the UserDefaults

Drag and drop

For dragging, add a itemProvider() modifier to the rows of the Table(selection:sortorder:columns:rows:)

For dropping, add an onInsert(of:perform:) modifier to the ForEach (!!) that decodes and inserts the items into the array.

Export data to a file

CommandGroup(replacing:) with a Section to make the horizontal divider in the command menu

fileExporter(isPresented:document:contentType:onCompletion)

Import images from Continuity Camera

ImportFromDevicesCommands()

importsItemProviders(_:onImport:)