Erste Schritte mit SwiftUI: Ein Leitfaden für Anfänger mit Codebeispielen

Jan 02 2023
Einrichten eines SwiftUI-Projekts Um mit dem Erstellen einer SwiftUI-App zu beginnen, benötigen Sie einen Mac, auf dem Xcode 11 oder höher installiert ist. Öffnen Sie Xcode und wählen Sie im Startbildschirm „Neues Xcode-Projekt erstellen“.

Einrichten eines SwiftUI-Projekts

Um mit dem Erstellen einer SwiftUI-App zu beginnen, benötigen Sie einen Mac, auf dem Xcode 11 oder höher installiert ist. Öffnen Sie Xcode und wählen Sie im Startbildschirm „Neues Xcode-Projekt erstellen“.

Wählen Sie im Vorlagenauswahlbildschirm „iOS“ und dann „Single View App“. Weiter klicken".

Benennen Sie Ihr Projekt und wählen Sie „Swift“ als Sprache. Stellen Sie sicher, dass die Optionen „Use Core Data“ und „Include Unit Tests“ deaktiviert sind. Weiter klicken".

Wählen Sie einen Speicherort für Ihr Projekt und klicken Sie auf „Erstellen“.

Xcode erstellt ein neues Projekt mit einer einzigen Ansichtsvorlage. Die Vorlage enthält eine Storyboard-Datei, die zum Entwerfen der Benutzeroberfläche Ihrer App verwendet wird, und eine View-Controller-Datei, die zum Verarbeiten von Benutzereingaben und -interaktionen verwendet wird.

Erstellen einer einfachen Benutzeroberfläche mit SwiftUI

Um mit dem Aufbau Ihrer Benutzeroberfläche zu beginnen, öffnen Sie die Datei „ContentView.swift“ im Projektnavigator. Diese Datei enthält den Code für die Stammansicht Ihrer App.

Ersetzen Sie den Inhalt der Datei durch den folgenden Code:

import SwiftUI

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

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Die Struktur „ContentView_Previews“ wird verwendet, um eine Vorschau der Inhaltsansicht im Designbereich anzuzeigen.

Um Ihre Benutzeroberfläche anzuzeigen, klicken Sie auf die Schaltfläche „Fortsetzen“ in der oberen rechten Ecke der Leinwand. Sie sollten eine Leinwand mit dem Text „Hello, World!“ sehen. in der Mitte angezeigt.

Lassen Sie uns nun eine Schaltfläche zur Benutzeroberfläche hinzufügen. Ersetzen Sie den Inhalt der Eigenschaft „body“ durch den folgenden Code:

VStack {
    Text("Hello, World!")
    Button(action: {
        print("Button tapped!")
    }) {
        Text("Click Me")
    }
}

Um die Schaltfläche in der Designleinwand anzuzeigen, klicken Sie erneut auf die Schaltfläche „Fortsetzen“. Unterhalb der Textansicht sollte eine Schaltfläche mit dem Text „Click Me“ angezeigt werden.

Das ist es! Sie haben jetzt ein grundlegendes Verständnis dafür, wie Sie mit SwiftUI eine Benutzeroberfläche erstellen.