Steuerelemente verbergen mit einer DisclosureGroup in SwiftUI

Ist auf einer View nur wenig Platz, oder sind Informationen oder Einstellungen für den Anwender nur von geringem Interesse, eignet sich eine DiscloserGroup um Inhalte zu verbergen und nur auf Wunsch anzuzeigen.

Einfach ausgedrückt, ist eine DisclosureGroup ein Bereich der grafischen Oberfläche, der vom Anwender auf und zu geklappt werden kann. Wichtig ist dabei der Umstand, dass die Steuerelemente in einer DisclosureGroup immer sofort zusammen mit der übergeordneten View erzeugt werden. Sie existieren, sind jedoch unsichtbar.

Gut eignet sich eine DisclosureGroup für den Einsatz in einer Form-View. Der folgende Code zeigt ein typisches Anmeldeformular, bei dem ein Nutzer seinen Benutzernamen und sein Passwort eintragen muss. Zusätzlich gibt es die Möglichkeit, die Anmeldedaten zu speichern. Weitere Einstellungen muss der Anwender in der Regel nicht ändern. Möchte er es dennoch tun, findet er die zusätzlichen Konfigurationen, wenn er die Gruppe mit der Beschriftung Optionen öffnet. Erst dann werden die in der DisclosureGroup eingebetteten Toggle-Schalter angezeigt.

Aufmerksamkeit verdient im Code die State-Variable disclosureIsExpanded. Sie verwaltet den aktuellen Zustand und legt fest, ob die Gruppe auf oder zugeklappt ist. Wird die Variable an anderer Stelle im Code auf false gesetzt, das geschieht im Beispiel durch den Button, schließt die DisclosureGroup.

import SwiftUI

struct DisclosureGroupView: View {

    @State var username: String = ""

    @State var password: String = ""

    @State var isAutoSignIn: Bool = false

    @State var isOption1: Bool = false

    @State var isOption2: Bool = false

    @State var isOption3: Bool = true

    @State var disclosureIsExpanded = false

    var body: some View {

        Form {

            Section(header: Text("Anmeldung")) {

                TextField("Benutzername", text: $username)

                TextField("Passwort", text: $password)

                Toggle(isOn: $isAutoSignIn) {Text("Anmeldedaten speichern")}

                DisclosureGroup("Optionen" , isExpanded: self.$disclosureIsExpanded) {

                    Toggle(isOn: $isOption1) {Text("Bei Inaktivitat automatisch abmelden")}

                        .padding(EdgeInsets(top: 15, leading: 15, bottom: 5, trailing: 5))

                    Toggle(isOn: $isOption2) {Text("Unsichere Verbindung erlauben")}

                        .padding(EdgeInsets(top: 5, leading: 15, bottom: 5, trailing: 5))

                    Toggle(isOn: $isOption3) {Text("Verbindungen protokollieren")}

                        .padding(EdgeInsets(top: 5, leading: 15, bottom: 5, trailing: 5))

                }

            }

            Section {

                Button(action: {

                    disclosureIsExpanded = false

                    print("Anmelden")

                }) {

                    Text("Jetzt anmelden")

                }

            }

        }.navigationBarTitle("DisclosureGroup")

    }

}

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