31. A SwiftUI List, OutlineGroup and DisclosureGroup Tutorial

The previous chapter covered the List, OutlineGroup and DisclosureGroup views and explored how these can be used to visually present hierarchical information within an app while allowing the user to selectively hide and display sections of that information.

This chapter will serve as a practical demonstration of these features in action through the creation of an example project.

31.1 About the Example Project

The project created in this chapter will recreate the user interface shown in Figure 30-4 in the previous chapter using the data represented in Figure 30-1. Initially, the project will use a List view to traverse and display the information in the car data structure. Next, the project will be modified to use the OutlineGroup within the List to display the information in groups using section headers. Finally, the project will be extended to use the DisclosureGroup view.

31.2 Creating the OutlineGroupDemo Project

Launch Xcode and select the option to create a new Multiplatform App project named OutlineGroupDemo.

31.3 Adding the Data Structure

The first step before a list can be displayed is to add the data structure that will form the basis of the user interface. Each row within the list will be represented by an instance of a structure named CarInfo designed to store the following information:

•id – A UUID to uniquely identify each CarInfo instance.

•name – A string value containing the name of the car type, manufacturer or car model.

•image – A string referencing the SF Symbol image to be displayed.

•children – An array of CarInfo objects representing the children of the current CarInfo instance.

Within the project navigator panel, select the ContentView.swift file and modify it to add the CarInfo structure declaration as follows:

import SwiftUI

 

struct CarInfo: Identifiable {

    var id = UUID()

    var name: String

    var image: String...

31.4 Adding the List View

With the data structure added to the project, the next step is to modify the content view so that it uses a List configured to extract the structured data from the carItems array. Before doing that, however, we first need to design a custom view to be presented within each list cell. Add this view to the ContentView.swift file as follows:

struct CellView: View {

    

    var item: CarInfo

    

    var body: some View {

        HStack {

            Image(systemName: item.image)

                .resizable()

                .scaledToFit()

          ...

31.5 Testing the Project

Test the progress so far by referring to the preview canvas and switching into Live Preview mode. On launching, the two top level categories will be listed with disclosure controls available:

Figure 31-1

Using the disclosure controls, navigate through the levels to make sure that the view is working as expected:

Figure 31-2

31.6 Using the Sidebar List Style

The List instance above is displayed using the default list style. When working with hierarchical lists it is worthwhile noting that a List style is available for this specific purpose in the form of the SidebarListSyle. To see this in action, add a modifier to the List view as follows:

struct ContentView: View {

    var body: some View {

        List(carItems, children: \.children) { item in

            CellView(item: item)

        }

        .listStyle(SidebarListStyle())

    }

}

When previewed, the list will now appear as shown in Figure 31-3, providing a cleaner and more ordered layout than that provided by the default style:

Figure 31-3

31.7 Using OutlineGroup

Now that we’ve seen the use of the List view to display hierarchical data, the project will be modified to make use of the OutlineGroup view within a list to divide the list into groups, each with a section header.

Once again working within the ContentView.swift file, modify the ContentView declaration so that it reads as follows:

struct ContentView: View {

    var body: some View {

        List {

            ForEach(carItems) { carItem in

                Section(header: Text(carItem.name)) {

                    OutlineGroup(carItem.children ?? [CarInfo](),

             ...

31.8 Working with DisclosureGroups

The DisclosureGroup view will be demonstrated within a new SwiftUI View file. To add this view, right-click on the Shared folder in the project navigator panel and select the New File… menu option. In the new file template dialog, select the SwiftUI View file option, click Next and name the file SettingsView before clicking on the Create button.

With the SettingsView.swift file loaded into the editor, make the following additions to add some custom views and state properties that will be used to simulate settings controls:

import SwiftUI

struct SettingsView: View {

    

    @State private var hybridState: Bool = false

    @State private var electricState: Bool = true

    @State private var fuelCellState: Bool = false

    @State private var inversionState: Bool = true

.

.

struct ColorControl: View {

 &...

31.9 Summary

The List and OutlineGroup views provide an easy way to group and display hierarchical information to users with minimal coding. The DisclosureGroup view is used by these views to allow users to expand and collapse sections of information, and may also be used directly in your own SwiftUI declarations. This chapter has demonstrated these views in action within an example project.