🧑‍💻 WWDC21: SwiftUI on the Mac

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/

Garden App

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(_: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

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


SwiftUI on the Mac: The finishing touches

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

Create a settings window

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


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


Import images from Continuity Camera




I would love to hear your thoughts about this! Just send an email to garden@oliver3.nl with your message and if you want me to publish it here.