Die Grid Funktionen sind man heute eigentlich fast überall, egal ob in einer App wie Instagram oder einer Webseite eines Fotografen – es ist auch egal ob es Bilder oder Texte beinhaltet. Eine Grid Funktion zeigt sehr platzsparend verschiedene Inhalte an und es ist sehr bequem das Ganze durchzuscrollen.

Heute möchte ich euch zeigen, wie man das in der iOS Entwicklung mit Swiftui programmieren kann. Ich bin seit vielen Jahren ein Fan und ein Hasser von dieser Sprache. Einerseits sind die Befehle oft sehr logisch ohne grossen Schnickschnack, aber andererseits verabscheue ich den übertriebenen Einsatz der {} oder () oder [] – ich find das absolut der pure HORROR 🙂 Aber auf mich hört man ja nicht.

Egal hier findet ihr nun meine Video Anleitung wo ich Schritt für Schritt euch versuchen zu erklären wie man so eine Grid Funktion erstellen könnte. Denkt daran es gibt soviele Möglichkeiten das hinzubekommen – mein Weg ist vielleicht nicht der Beste oder Schönste – aber er funktioniert 🙂

Video

Erklärung

Der pure Grid Befehl lautet so:

Mit der folgenden Zeile definiert ihr die Anzahl Kolonnen hier sinds 2 Stück. Bei 3 müsst ihr einfach am Ende nochmal ein GridItem() dazuschreiben (vergiss das Komma nicht)

1

let columns: [GridItem] = [GridItem(),GridItem()]

Danach verbindet man es mit dem eigentlichen Grid Befehl und verknüpft diese Zeile von Oben mit der von Unten.

1
2
3

LazyVGrid(columns: columns){
//der im grid anzuzeigende inhalt
}

Damit das ganze auch Scrollbar ist, müsst ihr natürlich noch alles in das

1

ScrollView{}

einpacken

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

let columns: [GridItem] = [GridItem(),GridItem()]
 
    var body: some View {
        ScrollView {
            VStack {
                LazyVGrid(columns: columns){
                    ForEach(1..<40){ index in
                        Rectangle()
                            .frame(height: 200)
                            .border(Color.yellow, width: 12)
                            .border(Color.red, width: 10)
                            .border(Color.green, width: 8)
                            .overlay(
                            Text("\(index)\n Eric Mächler \n Youtuber")
                                .foregroundColor(.white)
                                .multilineTextAlignment(.center)
 
                            )
 
                    }
                }
            }
            .padding()
        }
    }