Guten Tag allerseits. Mein Name ist Anna Zharkova, ich bin eine führende mobile Entwicklerin von Usetech.Über die SwiftUI-Technologie, die Apple letztes Jahr im WWDC 2019 angekündigt hat, wurde viel gesagt. Im Prinzip gibt es bereits genug Material über seine Funktionen, was sich unter seiner Haube befindet und wie man es für eine schnelle und schöne Benutzeroberfläche verwendet.
Ich biete Ihnen eine kurze Reihe von Artikeln zur Verwendung dieses Frameworks im realen Leben und in realen Anwendungen und nicht in Avocado-Sandwich-Konstrukteuren. Um alles ernst und ausgereift zu machen, werden wir uns ansehen, wie unsere SwiftUI-Anwendung den Prinzipien einer sauberen Architektur und eines sauberen Codes entspricht.Aber fangen wir mit den Grundlagen an. Dieser Teil ist nur eine Einführung und grundlegende Informationen. Wenn Sie mit diesen Funktionen von SwiftUI bereits vertraut sind, gehen Sie zu den folgenden Teilen:Teil 2 (Arbeiten mit vorgefertigten Bibliotheken für das UIKit)Teil 3 (hier zur Architektur)Teil 4 (hier zur Navigation)Wenn Sie es noch nicht geschafft haben, sich zu treffen, halten Sie für eine Pause an ein paar Minuten)Die Hauptmerkmale der deklarativen Entwicklung im neuen Framework sind die Abkehr von der direkten Verwendung von UIViewController, UIView und das Ersetzen durch Strukturen, die das View-Protokoll implementieren. Alle Komponenten des visuellen Teils werden ebenfalls mit deklarativer Syntax beschrieben und befinden sich in der Hauptkörper-Eigenschaft jeder Ansicht. Einstellungen, Stilisierung und Anpassung von Komponenten, Navigation zwischen Bildschirmansicht wird ebenfalls mit deklarativer Syntax festgelegt.Dieser Code beschreibt beispielsweise eine Ansicht für eine Nachrichtenliste, indem Sie darauf klicken, woraufhin ein Bildschirm mit einer separaten Nachrichtenansicht geöffnet wird:struct NewsListView: View{
@State var data: [NewsItemMock]
var body: some View {
NavigationView{
List(data) { item in
NavigationLink(destination:NewsItemView(item:item)) {
NewsItemRow(data: item)
}
}
}
}
SwiftUI verwendet ViewBuilder, einen deklarativen Schnittstellendesigner, der auf Functional Builder basiert. Dieser Mechanismus wurde in Swift 5.1 angezeigt und ermöglicht es Ihnen, Elemente in einem bestimmten Array innerhalb eines Closure-Blocks zu gruppieren, z. B. in einem übergeordneten Objekt. Ein Beispiel für die Verwendung von ViewBuilder finden Sie auf der Folie. Wir platzieren die View-Steuerelemente einfach in der Reihenfolge, die wir benötigen, beispielsweise in einem vertikalen oder horizontalen Stapel, ohne addSubview zu verwenden, und fügen beim Kompilieren von SwiftUI selbst Elemente zu einem komplexeren übergeordneten Container hinzu und gruppieren sie.Und hier ist der Code:
VStack {
HStack {
VStack(alignment: .leading,spacing: 10) {
HeaderText(text: data.title ?? "")
SubheaderText(text: data.description ?? "")
SmallText(text: data.publishedAt?
.formatToString("dd.MM.yyyy") ?? "")
}
ThumbImage(withURL: data.urlToImage ?? "")
}
konvertiert in ein Listenelement mit 3 Textfeldern und einem Bild:Obwohl SwiftUI das Konzept eines UIViewControllers ablehnt, ist der Einstiegspunkt für die Anwendung der UIHostingController, in den die angezeigte Ansicht übergeben und eingebettet wird. Das heißt, die neue Technologie ist ein Add-On zu UIKit:
@available(iOS 13.0, tvOS 13.0, *)
open class UIHostingController<Content> : UIViewController where Content : View {
public var rootView: Content
public init(rootView: Content)
Übrigens sind alle SwiftUI-Steuerelemente deklarative Analoga von UIKit-Steuerelementen.Beispielsweise sind VStack und HStack Analoga der üblichen vertikalen bzw. horizontalen UIStackView. Liste ist UITableView, Text ist UILabel, Button ist UIButton, Bild ist UIImage, etc.Das Verbinden und Konfigurieren von Steuerelementen erfolgt deklarativ mit den verfügbaren Modifikatoren. Elemente werden in UIStackView-Analoga mit einigen vordefinierten Eigenschaften gruppiert.Zusätzlich zur Änderung der Art und Weise, wie der visuelle Teil beschrieben wird, ändern sich auch die Datenflusssteuerung und der Mechanismus der UI-Reaktion darauf. Swift UI ist ein nicht ereignisabhängiges Framework. Jene. Die Ansicht darin ist das Ergebnis einer Funktion bestimmter Zustände und nicht einer Folge von Ereignissen. Die vom Benutzer ausgeführte Aktion ändert die Benutzeroberfläche nicht direkt. Sie können diese oder jene Steuerelemente zum Anzeigen, Hinzufügen oder Entfernen nicht direkt ändern. Zunächst ändern sich die Eigenschaften oder Statusvariablen, die über den einen oder anderen Property Wrapper (Property Wrapper) mit der Ansicht verbunden sind .
Die wichtigsten verwendeten Property Wrapper sind:1.Zustand - wird für lokale Variablen verwendet.
struct NewsItemRow: View {
@State var title: String
@State var description: String
@State var dateFormatted: String
@State var imageUrl: String
var body: some View {
VStack {
HStack {
VStack(alignment: .leading,spacing: 10) {
HeaderText(text: title)
SubheaderText(text: description)
SmallText(text: dateFormatted)
}
ThumbImage(withURL: imageUrl)
}
}
}
2. @Binding - ein Analogon von schwach, das verwendet wird, wenn eine Referenz auf einen Wert übergeben wird.Wir verwenden es, wenn mehr als eine Ansicht von einer Eigenschaft abhängt. Zum Beispiel, wenn wir einen Wert aus der Ansicht der zweiten Ebene an die ursprüngliche Ansicht übergeben möchten.
struct FirstView: View {
@State var isPresented: Bool = true
var body: some View {
NavigationView {
NavigationLink(destination:
SecondView(isPresented: self.$isPresented)) {
Text("Some")
}
}
}
}
struct SecondView: View {
@Binding var isPresented: Bool
var body: some View {
Button("Dismiss") {
self.$isPresented = false
}
}
}
3. @EnvironmentObject - Übertragen von Objekten zwischen Ansicht4. @ObjectBinding, @ObservableObject - Wird verwendet, um Änderungen an Modelleigenschaften mithilfe der Combine Framework-Tools zu verfolgen.
class NewsItemModel: ObservableObject,IModel {
@Published var title: String
@Published var description: String
@Published var dateFormatted: String
@Published var imageUrl: String
}
Wir werden später über ihn sprechen.Damit. Wenn wir unsere Ansicht ändern möchten, ändern wir die Eigenschaft, eine Anzeige mit einem der Property Wrapper. Anschließend wird die deklarative Ansicht mit allen internen Kontrollen neu erstellt.Wenn sich eine der Statusvariablen ändert, wird die Ansicht als Ganzes neu erstellt.Betrachten Sie ein kleines Beispiel. Wir haben eine Art Bildschirm, in dessen Navigationsleiste sich eine Schaltfläche zum Hinzufügen von Inhalten zu Favoriten befindet. Damit wir das Indikatorbild auf dieser Schaltfläche ändern können, verwenden wir PropertyWrapper. Erstellen Sie in diesem Fall beispielsweise eine lokale Variable und deklarieren Sie sie alsZustand::
struct NewsItemView: View {
@State var isFavorite: Bool
....
Wir werden die Änderung des Eigenschaftswerts dem Triggerereignis zuweisen, das beim Drücken der Taste auftritt:struct NewsItemView: View{
@State var isFavorite: Bool
var body: some View {
NavigationView {
VStack {
Text("Some content")
}
}
.navigationBarItems(trailing: Button(action: {
self.isFavorite = !self.isFavorite
}){
Image(self.isFavorite ? "favorite" : "unfavorite")
.frame(width: 20, height: 20, alignment: .topTrailing)
})
}
Daher wird sich unsere Sichtweise ändern:
Und im Prinzip sind dies alle grundlegenden Dinge, die Sie über SwiftUI wissen müssen, um loszulegen.Aber reicht das aus, um zu arbeiten?Unkomplizierte Benutzeroberflächen aus einfachen Steuerelementen erstellen, ohne vollständig an Xib und Storyboards gebunden zu sein.Und für etwas mehr, nein.Erstens haben nicht alle Steuerelemente in SwiftUI Analoga. Dies gilt sowohl für Standard-UIKit UISearchView, UICollectionView als auch für Elemente aus Bibliotheken von Drittanbietern.Zweitens gibt es keine (oder fast keine, vielleicht macht es gerade jemand) Lösungen von Drittanbietern für die Arbeit mit Data Flow SwiftUI.Sie müssen also vorhandene Lösungen für Standard-iOS-Anwendungen anpassen .Bitte klicken Sie auf den Link.