SwiftUI Tutorial: Creating Expandable List

How to use OutlineGroup and DisclosureGroup in SwiftUI

Figure 1.

Using an expandable list view in your app allows your users a certain level of control to what they can see in their screen. This simple but ingenious method promotes better user experience especially when there are too much data that the screen will handle.

In this tutorial, we will tackle about the different ways to create expandable list view in SwiftUI, starting with the default way using List modifier. Then the built-in expandable views: OutlineGroup and DisclosureGroup.

Note: Your simulator or device needs to be iOS 14 or above. Else, these features won’t work.

Building the Model

Before we can make the list expandable, it must have a data model first. Create a model by writing down this code:

struct SFMenu: Identifiable {
    var id = UUID()
    var name: String
    var sfSymbol: String
    var subMenuItems: [SFMenu]?
    
    // List
    static let iPhone = SFMenu(name: "iPhone", sfSymbol: "iphone")
    static let keyboard = SFMenu(name: "Keyboard", sfSymbol: "keyboard")
    static let mouse = SFMenu(name: "Magicmouse", sfSymbol: "magicmouse")
    
    static let person = SFMenu(name: "Person", sfSymbol: "person")
    static let…