web-dev-qa-db-fra.com

SwiftUI: Changer la ligne de la liste Mettez en surbrillance la couleur lorsque vous appuyez sur

La couleur par défaut d'une ligne de liste lorsque vous appuyez dessus est le gris.

Je sais comment changer la couleur d'arrière-plan en utilisant .listRowBackground, mais cela change ensuite en toute la liste.

Comment puis-je passer à une couleur personnalisée lorsque vous appuyez dessus, pour que SEULE la ligne tapée reste rouge?

import SwiftUI

struct ExampleView: View {
    @State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .listRowBackground(Color.red)

            }


        }
    }


}

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}

enter image description here

4
Mane Manero

Tout d'abord, vous voulez que le modificateur .ListRowBackground sur la ligne ne soit pas la liste entière, puis utilisez-le pour définir de manière conditionnelle la couleur d'arrière-plan de la ligne sur chaque ligne. Si vous enregistrez l'ID de la ligne tapée dans une variable @State, vous pouvez définir la ligne sur le rouge ou la couleur par défaut en fonction de l'état de la sélection. Voici le code:

import SwiftUI

struct ContentView: View {
    @State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]
    @State private var selectedFruit: String?

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                        .onTapGesture {
                            self.selectedFruit = fruit
                    }
                    .listRowBackground(self.selectedFruit == fruit ? Color.red : Color(UIColor.systemGroupedBackground))
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
1
Chuck H