SwiftUI ist eine neue bequeme Möglichkeit, Benutzeroberflächen auf Xcode zu erstellen. Wenn Sie eine kurze Einführung in SwiftUI wünschen, dann ist dieser Blogeintrag genau das Richtige für Sie.
Erstellen wir zunächst ein Projekt mit SwiftUI-Unterstützung. Die Mindestsystemanforderungen hierfür sind macOS Catalina und Xcode 11. Erstellen Sie ein neues Projekt
"Datei> Neu> Projekt ..." , wählen Sie
" Einzelansicht- App" und stellen Sie sicher, dass
"Benutzeroberfläche: SwiftUI" ausgewählt ist .
Das Projekt sieht ungefähr so aus:
Wie Sie vielleicht bemerkt haben, können Sie jetzt alle Änderungen sofort in der
Vorschau sehen . Versuchen Sie beispielsweise, den Text in
"Hallo, Habr!" Zu ändern. Geil ja?
Wenn keine Änderungen vorgenommen wurden, klicken Sie auf die Schaltfläche
Fortsetzen (in der oberen rechten Ecke). Wenn die
Vorschau nicht sichtbar ist, klicken Sie auf
Editor-Optionen und vergewissern Sie sich, dass
Canvas ausgewählt ist
(ptionsOptionen + ⌘Befehl + ↵Enter) .
Ansicht, Text, Stapel ...
Wenn Sie
ContentView.swift auswählen, wird
Folgendes angezeigt :
struct ContentView: View { var body: some View { Text(", !") } }
Hier sehen wir, dass
ContentView> body einen
Text hat , der
"Hallo, Habr!" Anzeigt . Fügen wir einen weiteren Text hinzu. Wenn Sie versuchen, direkt zur
Körperansicht hinzuzufügen, wird Xcode fluchen. Verwenden
Sie dazu zuerst
HStack oder
VStack .
Drücken Sie die Befehlstaste, klicken Sie auf
Text (⌘Befehl + Text) und wählen Sie dann
„In HStack einbetten“ .
Dieser Befehl erstellt automatisch einen
HStack und fügt dort unseren Text ein. Jetzt können Sie einen weiteren Text hinzufügen:
struct ContentView: View { var body: some View { HStack { Text(",") Text("!") } } }
Swiftui Inspektor
Wenn Sie auf
„Befehl + Text“ klicken und
„SwiftUI-Inspektor anzeigen ...“ auswählen, wird ein Inspektor geöffnet, in dem Sie die
Texteigenschaften visuell ändern können. Wenn im Inspektor beispielsweise
„Schriftart“ in
„Großer Titel“ geändert
wurde, ändert sich der Code auch in
„Schriftart“ ( „Großer Titel“ ) . Sehr einfach:
Um zu verstehen, was
Status ist , fügen wir eine Aktion hinzu. Wir wiederholen, was wir zuvor getan haben:
„Befehl + HStack“ , wählen Sie
„In VStack einbetten“ und fügen Sie dann einen Button zu diesem
VStack hinzu :
struct ContentView: View { @State var tapCount = 0 var body: some View { VStack { HStack { Text(",") .font(.largeTitle) .foregroundColor(Color.green) Text("!") .font(.largeTitle) .fontWeight(.bold) } Button(action: { self.tapCount += 1 }) { Text("Tap count \(tapCount)") .font(.title) } } } }
Jedes Mal, wenn Sie auf die Schaltfläche klicken, ändern wir den Wert von
tapCount . Aber was heißt
Staat ? Wenn wir möchten, dass unsere
Sicht erneut gerendert wird, wenn sich ein Wert ändert, sollten wir
State verwenden . Wenn wir in diesem Fall auf die Schaltfläche klicken, ändern wir den als
Status festgelegten tapCount . Deshalb wird unser
Körper mit jedem Klick wieder gerendert.
Live-Vorschau
Momentan passiert nichts, wenn Sie auf die Schaltfläche klicken. Um dies zu beheben und wie ein Simulator zu arbeiten, müssen Sie
"Live Preview" aktivieren. Die Aktivierungsschaltfläche befindet sich unten rechts:
Jetzt nochmal versuchen. Bei jedem Drücken der Taste ändert sich der Wert.
Was weiter?
Nun haben Sie das Grundkonzept von SwiftUI. Außerdem
rate ich Ihnen, die
SwiftUI-Tutorials zu lesen und sich ein
WWDC-Video über SwiftUI anzusehen . Die Dokumentation finden Sie
hier .
Link zum Github-Projekt ist
hier .