Feuerwerk, habr. Bevor wir zum Artikel übergehen, möchte ich Ihnen absolut kostenlos eine Aufzeichnung von zwei sehr nützlichen Lektionen mitteilen, die unsere Lehrer am Vorabend des Beginns der Grund- und Fortgeschrittenenkurse zur iOS-Entwicklung durchgeführt haben:
Fahren wir nun mit dem Artikel fort.
Diese Woche möchte ich mit Ihnen über Grids sprechen, eine der am meisten erwarteten neuen Funktionen in SwiftUI. Alle warteten gespannt auf eine Alternative
UICollectionViewin SwiftUI, und schließlich erschien sie dieses Jahr. SwiftUI bietet uns LazyVGrid- und LazyHGrid-Ansichten , mit denen wir Layouts mit Elementgittern erstellen können.
Die Grundlagen
LazyVGrid und LazyHGrid sind zwei neue Ansichtstypen, mit denen SwiftUI ein super benutzerdefiniertes Layout basierend auf einem Raster von Elementen erstellt. Der einzige Unterschied zwischen ihnen ist die Füllachse. Das LazyVGrid füllt den verfügbaren Platz vertikal aus. LazyHGrid platziert seine Kinder horizontal. Die Achse ist der einzige Unterschied zwischen diesen beiden Ansichten. Daher gilt alles, was Sie über LazyVGrid lernen, für LazyHGrid und umgekehrt. Schauen wir uns das erste Beispiel an.
struct ContentView: View {
private var columns: [GridItem] = [
GridItem(.fixed(100), spacing: 16),
GridItem(.fixed(100), spacing: 16),
GridItem(.fixed(100), spacing: 16)
]
var body: some View {
ScrollView {
LazyVGrid(
columns: columns,
alignment: .center,
spacing: 16,
pinnedViews: [.sectionHeaders, .sectionFooters]
) {
Section(header: Text("Section 1").font(.title)) {
ForEach(0...10, id: \.self) { index in
Color.random
}
}
Section(header: Text("Section 2").font(.title)) {
ForEach(11...20, id: \.self) { index in
Color.random
}
}
}
}
}
}
Im obigen Beispiel erstellen wir ein dreispaltiges Raster, in dem jede Spalte eine feste Größe von 100pt hat. Ich werde dieses Beispiel verwenden, um alle Konfigurationsoptionen zu beschreiben, die uns zur Verfügung stehen.
- Der Parameter
columnsist ein Array, das die Spalten im Rasterlayout definiert. Um eine Spalte zu beschreiben, stellt SwiftUI uns den Typ GridItem zur Verfügung . Wir werden etwas später darüber sprechen. - Der Parameter
alignmentermöglicht es uns , den Inhalt des Gitters auszurichten eine Aufzählung VerwendungHorizontalAlignmentfür LazyVGrid undVerticalAlignmentfür LazyHGrid . Funktioniert genauso wiestack alignment. - Der Parameter
spacinggibt den Abstand zwischen den einzelnen Zeilen im LazyVGrid oder den Abstand zwischen den einzelnen Spalten im LazyHGrid an . - Mit dem Parameter
pinnedViewskönnen Sie Optionen zum Fixieren von Kopf- und Fußzeilen von Abschnitten angeben. Es ist standardmäßig leer, was bedeutet, dass sich Kopf- und Fußzeilen wie Inhalte verhalten und beim Scrollen verschwinden. Sie können das Fixieren von Kopf- und Fußzeile aktivieren. In diesem Fall überschneiden sie sich mit dem Inhalt und werden dauerhaft sichtbar.
GridItem
Jede Spalte im Raster muss mit einer Struktur definiert werden
GridItem. Mit diesem Typ GridItemkönnen wir Größe, Ausrichtung und Abstand für jede Spalte angeben. Schauen wir uns ein kleines Beispiel an.
private var columns: [GridItem] = [
GridItem(.fixed(50), spacing: 16, alignment: .leading),
GridItem(.fixed(75)),
GridItem(.fixed(100))
]
Wie Sie sehen können, kann jede Spalte unterschiedliche Optionen für Größe, Abstand und Ausrichtung haben. Das Interessanteste hier ist die Größe. Es gibt drei Möglichkeiten, die Größe einer Spalte innerhalb eines Rasters zu bestimmen. Es kann fest, flexibel oder anpassungsfähig sein.
Die feste Spalte ist die offensichtlichste. Das Raster platziert die Spalte entsprechend der von Ihnen angegebenen Größe. Im vorherigen Beispiel haben wir ein dreispaltiges Layout erstellt, in dem die Spalten auf 50pt, 75pt bzw. 100pt festgelegt sind.
Option flexibelMit dieser Option können Sie eine Spalte definieren, die je nach verfügbarem Speicherplatz erweitert oder verkleinert wird. Wir können auch minimale und maximale flexible Säulengrößen anbieten. Standardmäßig wird ein Mindestwert von 10pt verwendet und ist nicht auf den Höchstwert begrenzt.
private var columns: [GridItem] = [
GridItem(.flexible(minimum: 250)),
GridItem(.flexible())
]
Hier erstellen wir ein Layout, das den verfügbaren Platz zwischen zwei flexiblen Spalten aufteilt. Die erste Spalte nimmt 250pt ihrer Mindestgröße ein, während die zweite den gesamten verfügbaren Speicherplatz hat.
Die interessanteste Option ist adaptiv . Mit der Antwortoption können wir mehrere Elemente im Raum einer einzelnen flexiblen Spalte platzieren. Versuchen wir es anhand eines Beispiels herauszufinden.
private var columns: [GridItem] = [
GridItem(.adaptive(minimum: 50, maximum: 100)),
GridItem(.adaptive(minimum: 150))
]
Wie Sie sehen können, haben wir zwei reaktionsfähige Spalten. Die erste Spalte enthält mehrere Elemente mit einer Mindestgröße von 50pt und einer Höchstgröße von 100pt. Responsive Spalten sind nützlich, wenn die Anzahl der Elemente in einer Spalte auf dem verfügbaren Speicherplatz basieren muss.
Die wahre Stärke von Gittern liegt darin, dass Sie mit dem Mischen von Säulentypen beginnen. Sie können ein zweispaltiges Layout erstellen, in dem das erste festgelegt ist und das zweite reagiert. Mal sehen, wie es aussehen wird.
private var columns: [GridItem] = [
GridItem(.fixed(100)),
GridItem(.adaptive(minimum: 50))
]
Fazit
Mit dem Raster können Sie sehr komplexe und interessante Layouts erstellen, indem Sie verschiedene Typen mischen
GridItem. Es ist zu beachten, dass alle Änderungen an den Netzen animiert werden können. Ich hoffe, Ihnen hat dieser Artikel gefallen. Folgen Sie mir auf Twitter und stellen Sie Ihre Fragen zu diesem Thema. Vielen Dank für Ihre Aufmerksamkeit, wir sehen uns!
Weitere Informationen zu unseren Kursen finden Sie unter den folgenden Links: