SwiftUI Kurzreferenz

von @ralfebert · aktualisiert am 26. Juli 2021

View

struct ContentView: View {
    var body: some View {
        Text("Hello!")
    }
}

Texte

Text("Hello!")

Schriftgrößen:

Text("Hello!")
    .font(.headline)

Text("Hello!")
    .font(.system(size: 100, weight: .bold))

Button

Button(
    action: {
        print("Hello!")
    },
    label: {
        Text("Button Text")
    }
)

Kurzform:

Button("Hello") {
    print("Hello world!")
}

Listen

Statische Listenansicht:

List {
    Text("Item 1")
    Text("Item 2")
    Text("Item 3")
}

Um Daten aus einem Swift-Array anzeigen muss der Datentyp das Identifiable-Protokoll erfüllen oder eine Eigenschaft zur Identifizierung angegeben werden:

struct Person: Identifiable {
    var id : Int
    var name : String
}

struct ContentView: View {
    let persons = [Person(id: 1, name: "Alice"), Person(id: 2, name: "Bob")]

    var body: some View {
        VStack {
            // If type implements Identifiable
            List(persons) { person in
    Text(person.name)
}
            // Otherwise you need to specify an id property
            List(persons, id: \.id) { person in
    Text(person.name)
}
        }
    }
}

Beispielprojekt

Die Inhalte einer List-View können mit dem ForEach-View auch aus mehreren Teilen zusammengesetzt werden:

List {
    Text("A static item")
    ForEach(self.persons) { person in
        Text(person.name)
    }
}

Weitere Beispiele zu Listen:

NavigationView und NavigationLink

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                NavigationLink("Go to Other View", destination: OtherView())
            }
            .navigationBarTitle("Content")
        }
    }
}

struct OtherView : View {
    var body: some View {
        Text("Other View")
            .navigationTitle("Other View")
    }
}

Weitere Beispiele:

Auswahl per Picker

Sheet anzeigen

struct ContentView: View {
    @State var isPresented = false

    var body: some View {
        Button("Show Sheet") {
            self.isPresented.toggle()
        }
        .sheet(isPresented: $isPresented) {
            OtherView()
        }
    }
}

Weitere Informationen