Building an expandable list with nested items is quite a complex and error prone task to implement when using
UIKit. Luckily with SwiftUI 2.0, Apple introduced
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
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:
Listto render hierarchical data.
OutlineGroupin List to handle multiple kind of views.
DisclosureGroupfor expandable/collapsible behavior to group of views with state binding.
You can download the completed project from the GitHub Repository.
Sample app to learn about how to represent hierarchical data in the UI using new SwiftUI 2.0 View, Outline & Disclosure…
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…