Skip to main content

Einklappbare Form-Sektion für Einstellungen

Beschreibung

InDiese SwiftUIView kannst du dafür das DisclosureGroup-Element nutzen. Hierzeigt ein Beispiel,Formular mit einer aufklappbaren Sektion, die zusätzliche Inhalte anzeigt, wenn der Nutzer sie öffnet. Über die DisclosureGroup wird der Zustand gesteuert und Inhalte wie dasBenutzername umgesetztoder wird:E-Mail können übersichtlich eingebettet werden.

🔍 Zweck

  • Übersichtliche Darstellung von Benutzereinstellungen
  • Gruppierung von Informationen in einklappbaren Sektionen
  • Reduzierung der visuellen Komplexität bei Formularen
  • Strukturierung von Konfigurationsoptionen
  • Einfache Implementierung von Accordion-ähnlichen UI-Elementen

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct CollapsibleFormApp: App {
    var body: some Scene {
        WindowGroup {
            CollapsibleFormSectionExample()
        }
    }
}

public struct CollapsibleFormSectionExample: View {
    // Track expansion state of the disclosure group
    @State private var isExpanded = false

    public init() {}

    public var body: some View {
        Form {
            // DisclosureGroup allows expanding/collapsing content
            DisclosureGroup("Account Settings", isExpanded: $isExpanded) {
                // Example account details
                Text("Username: johndoe")
                Text("Email: johndoe@example.com")
            }
        }
    }
}

// Modern Swift 5.10+ preview syntax
#Preview {
    CollapsibleFormSectionExample()
}

Erklärung des Codes: • Mit DisclosureGroup erzeugst du einen Bereich im Formular, der ein- und ausgeklappt werden kann. • Das Binding isExpanded steuert, ob der Bereich gerade geöffnet oder geschlossen ist. • Im ausgeklappten Zustand werden die Textfelder für „Username“ und „Email“ angezeigt. • Der gesamte Bereich ist in ein Form eingebettet, sodass das Layout dem typischen iOS-Formularstil entspricht.

Vorteile: Mit dieser Technik kannst du Formulare übersichtlicher gestalten, indem du nicht alle Felder auf einmal anzeigst. So können Nutzer gezielt Bereiche öffnen, die sie gerade interessieren, zum Beispiel Einstellungen für ihren Account.

Praxis-Tipp: Du kannst in einer View auch mehrere DisclosureGroup-Sektionen nutzen, um verschiedene Bereiche wie Zahlungsinformationen, Benachrichtigungen oder Profiloptionen übersichtlich zu gliedern.