SwiftUI Article

Check Boxing in Listen

event 25. Oktober 2021

In diesem Beitrag, möchte ich kurz auf Haken Setzung in Listen unter SwiftUI eingehen. Es ist ziemlich einfach zu kodieren. Außerdem zeigen wir eine weitere Liste mit den Ergebnissen der ausgewählten Teile und können diese anzeigen oder entfernen.


    import SwiftUI

    struct ContentView: View {
        
        @State private var selectedFruits: [String] = [String]()
        let fruits = ["Apple", "Orange", "Banana", "Cherry", "Coconut", "Kiwi"]
        
        var body: some View {
            VStack {
                List(fruits, id: \.self) { fruit in
                    HStack {
                        Text(fruit)
                        Spacer()
                        ZStack {
                            if selectedFruits.contains(fruit) {
                                Image(systemName: "checkmark.square.fill")
                                    .font(.largeTitle)
                            } else {
                                Image(systemName: "square")
                                    .font(.largeTitle)
                            }
                        }.foregroundColor(.blue)
                            .onTapGesture {
                                if selectedFruits.contains(fruit) {
                                    selectedFruits = selectedFruits.filter { $0 != fruit }
                                } else {
                                    selectedFruits.append(fruit)
                                }
                            }
                    }
                }
                
                Text("SelectedFruits")
                    .font(.title)
                List(selectedFruits, id: \.self) { fruit in
                    Text(fruit)
                }
            }
        }
    }

In unserem ContentView haben wir eine Variable „selectedFruits: …“ und eine Konstante mit einem Array von Früchten.

Im Bereich des „body“-Views geben wir erst die Früchte in einer Liste mit den Namen und den einem Kästchen mit und ohne Haken wieder.

Wir bedienen uns außerdem einer „onTap“- Funktion die die eine zweite Liste bedient, wenn der Haken gesetzt wird, dann wird die gesetzte Frucht unten angezeigt.

In diesem Beispiel wollte ich nur kurz zeigen wie einfach es ist eine Liste mit Haken und eine weitere Liste mit Ergebnissen anzuzeigen. Es sei nochmal daraufhin gewiesen, dass die @State Variable somit ein Array ist welches gefüllt oder geleert wird mit den ausgewählten Früchten.

https://github.com/DKoenig82/medium/tree/main/CheckBoxing_List

swift swiftui
David Koenig Swift Developer

David Koenig

Swift Developer & Autor