Hierarchische Listen mit der OutlineGroup in SwiftUI

Für macOS 11 und iOS 14 wurde das SwiftUI Framework um eine View erweitert, deren Einsatzbereich sehr speziell ist. Die OutlineGroup übernimmt die Aufgabe, eine Hierarchie von Elementen anzuzeigen, die als Eigenschaft über eine Liste von Kind-Elementen vom Typ wie das Element selbst verfügen. Zum Beispiel einen Ordner im Dateisystem, der Unterordner enthält oder eine Aufgabe, die aus mehreren Unteraufgaben besteht. Leider funktioniert eine OutlineGroup nur mit Strukturen oder Klassen, bei denen die Kind-Elemente vom selben Typ sind wie das Eltern-Element. Zum Ausgleich übernimmt die OutlineGroup die Aufgabe, die Baumstruktur der Elemente übersichtlich anzuzeigen. Die verschiedenen Äste des Baumes erhalten dabei automatisch die Fähigkeit, vom Anwender auf- und zu geklappt zu werden. Wie in SwiftUI üblich, mit einer Animation.

Eine Struktur zur Verwaltung von Aufgaben, die selbst eine Liste auf Aufgaben als Eigenschaft hat, zeigt der folgende Code. Wichtig ist, dass die Struktur Identifiable implementiert, um die Instanzen im laufenden Programm eindeutig zu identifizieren. Für die Umsetzung genügt es, eine Eigenschaft mit dem Namen id zu implementieren, die mit einer UUID initialisiert wird.

import SwiftUI

struct Task : Identifiable {

    var id = UUID()

    var taskDescription: String = ""

    var subTasks = [Task]()

 }

struct OutlineGroupView: View {

    func getTasks() -> [Task] {

        var aufgaben = [Task]()

        let gartenUnteraufgaben  =

            [Task(taskDescription: "Rasen mähen"),

             Task(taskDescription: "Blumen gießen"),

             Task(taskDescription: "Unkrauf entfernen"),

             Task(taskDescription: "Obst ernten")]

        let gartenAufgabe = Task( taskDescription: "Arbeiten im Garten", subTasks: gartenUnteraufgaben)

        aufgaben.append(gartenAufgabe)

        let garageUnteraufgaben  =

            [Task(taskDescription: "Fegen"),

             Task(taskDescription: "Rasenmäher reinigen"),

             Task(taskDescription: "Werkzeuge sortieren")]

        let garageAufgabe = Task( taskDescription: "Garage aufräumen", subTasks: garageUnteraufgaben)

        aufgaben.append(garageAufgabe)

        return aufgaben

    }

    var body: some View {

        Text("Hierhin kommt die OutlineGroup")

    }

}

Die Definition der Datenhierarchie beansprucht den größten Teil des Programcodes in diesem Beispiel. Die Programmierung der OutlineGroup ist hingegen einfach. Es genügt eine ForEach-Schleife in einer List, die für jede Aufgabe eine OutlineGroup erzeugt.

var body: some View {

    List {

        ForEach(self.getTasks()) { task in

            OutlineGroup(task, children: \.subTasks) { task in

                Text(task.taskDescription)

            }

        }

    }

}

Wenn tatsächlich nur eine hierarchische Liste von Elementen angezeigt werden soll und es keine zusätzlichen Objekte, zum Beispiel Sections gibt, kann der Code sehr vereinfacht werden. Der Typ List verfügt selbst auch über eine Funktion, um eine Auflistung mit Kind-Elementen anzuzeigen.

var body: some View {

    List(self.getTasks(), children: \.subTasks) { task in

            Text(task.taskDescription)}

}

Geschrieben am: 01.06.2020
Technologien: Swift, SwiftUI, macOS, iOS