Building 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:
- Using
List
to render hierarchical data. - Using
OutlineGroup
in List to handle multiple kind of views. - Using
DisclosureGroup
for expandable/collapsible behavior to group of views with state binding.
You can download the completed project from the GitHub Repository.
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.
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…