Building Expandable List with OutlineGroup & DisclosureGroup in SwiftUI 2.0

Expandable List with OutlineGroup & DisclosureGroup in SwiftUI 2.0

Building an expandable list with nested items is quite a complex and error prone task to implement when using UITableView in UIKit. Luckily with SwiftUI 2.0, Apple introduced OutlineGroup and DisclosureGroup. With the views in our arsenal, we can build a hierarchical expandable and collapsible list with minimal lines of code using declarative syntax and reactive state management.

What We Will Build

We’re going to explore about OutlineGroup and DisclosureGroup, and how we can use them in practice to build List that represent hierarchical data in the UI by building three different kind of screens:

1. Using List to render hierarchical data.
2. Using OutlineGroup in List to handle multiple kind of views.
3. Using DisclosureGroup for expandable/collapsible behavior to group of views with state binding.

You can download the completed project from the GitHub Repository.

alfianlosari/SwiftUI2Outlines

You can also watch the full video tutorial from YouTube.

Using List to Render Hierarchical Data

Let’s move on to the first example, which is showing list of items that have nested items inside of them.

Hierarchical Nested Expandable List

By looking at the screenshoot above, we can see that at the root level, we have items such as Computers, Smartphones, Tablets, and, Wearables.

Inside the Computers, we have desktop and laptops. Inside the desktops, we have the children such as iMac, Mac Mini, Mac Pro…