Skip to main content

Kontaktinformationen mit LabeledContent

Beschreibung

Diese View stellt Kontaktinformationen in einem Formular dar und nutzt LabeledContent, um Werte mit aussagekräftigen Symbolen und Titeln zu kombinieren. Die gefüllten SF Symbols heben die Kategorien wie E Mail und Telefon visuell hervor.

🔍 Zweck

  • Strukturierte Darstellung von Profil oder Kontaktdaten
  • Konsistente Anzeige von Schlüssel Wert Paaren in Einstellungen
  • Schnelles Scannen von Informationen durch Icons
  • Prototyping eines Kontaktabschnitts in einer App
  • Wiederverwendbares Muster für Detailansichten

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct LabeledContactInfoApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

public struct ContentView: View {
    public init() {}

    public var body: some View {
        Form {
            // Email row using LabeledContent for a clear key-value layout
            LabeledContent {
                Text("john@example.com")
            } label: {
                // Use a filled SF Symbol to emphasize the category
                Label("Email", systemImage: "envelope")
                    .symbolVariant(.fill)
            }

            // Phone row using LabeledContent with an icon
            LabeledContent {
                Text("+49 123 456789")
            } label: {
                Label("Phone", systemImage: "phone")
                    .symbolVariant(.fill)
            }
        }
        // Ensure consistent look on all devices
        .navigationTitle("Contact")
    }
}

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