6
votes

Alternance des couleurs d'arrière-plan sur ListView.builder

J'ai un ListView.builder générant des ListTile à partir d'une liste. Je voudrais obtenir une couleur alternée comme vous le feriez pour une liste typique.

Existe-t-il un moyen officiel Flutter de le faire? Ou je suis obligé de faire quelque chose comme

ListView.builder(
...
  itemBuilder: (...) {
    return ListTile
      ..
      title: Container(
        decoration: BoxDecoration(color: Colors.grey),
          child: Column(children: <Widget>[
            Text("What should've been the title property"),
            Text("and its trailing"),
          ],),
      ),

ou quelque chose du genre?

flutter dart widget

2 commentaires

vous avez un index passé à itemBuilder - utilisez-le simplement

@pskink J'aimerais avoir une réponse sur comment le styliser , en particulier, merci. Je peux utiliser l'index pour déterminer s'il est pair ou impair.

3 Réponses :

3
votes

Compris.

Au lieu d'utiliser ListTile , je peux utiliser une Card pour que la propriété color soit accessible. Ensuite, avec la suggestion de @ pskink, je peux utiliser l'index pour déterminer s'il est pair ou impair.

1 commentaires

Vous pouvez également simplement envelopper le ListTile dans Container et définir sa couleur.

15
votes

Vous pouvez utiliser l ' index fourni au générateur d'élément pour définir la couleur, et si vous souhaitez utiliser un ListTile , vous pouvez facilement lui donner une couleur d'arrière-plan en enveloppant dans un Container :

ListView.builder(
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: (index % 2 == 0) ? Colors.red : Colors.green,
      child: ListTile(
        title: ...
      ),
    );
  },
)

3 commentaires

Comment puis-je ajouter plus de couleurs. J'ai 10 listes et je veux ajouter 10 couleurs différentes comment puis-je y parvenir

Essayez de changer la logique en index% 10 et utilisez une instruction switch .

Petite note, mais vous pouvez utiliser index.isEven .

1
votes

La façon dont je l'ai fait est de configurer ma liste puis de créer une méthode où le type de retour est Color et le paramètre passé est l'index.

Color selectedColour(int position) {
  Color c;
  if (position % 3 == 0) c = Colours.cTLightBlue;
  if (position % 3 == 1) c = Colours.cTMidBlue;
  if (position % 3 == 2) c = Colours.cTDarkBlue;
  return c;
}

Dans l'appel de paramètre nommé Color selectedColour et vous aurez des couleurs alternées comme vous le souhaitez.

0 commentaires