0
votes

espacement dans listview.builder horizontal

Comment faire l'espacement automatique dans listview.builder (). Par exemple, j'ai besoin de quelque chose comme MainAxisAlignment.spaceEvenly dans la colonne, mais MainAxisAlignment.spaceEvenly ai besoin dans la liste view.builder (). J'aurai deux ou trois éléments horizontaux non déroulants. espacement entre les éléments pour différentes tailles d'écran.Pourriez-vous m'aider.

ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: 3,//list.length expected two or three
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  height: 100,
                  width: 100,
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(10.0)),
                    color: Colors.amber,
                    border: Border.fromBorderSide(
                      BorderSide(
                        color: Color(0xFF8D4AE9),
                        width: 1.0,
                      ),
                    ),
                  ),
                );
              },
            ),

Par exemple, image entrez la description de l'image ici

flutter flutter-layout

0 commentaires

3 Réponses :

0
votes

ajoutez autant de marge et de remplissage que vous le souhaitez.

ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 7,//list.length expected two or three
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 100,
            width: 100,
            margin: EdgeInsets.all(10),// add margin 
            padding: EdgeInsets.all(10),// add padding
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              color: Colors.amber,
              border: Border.fromBorderSide(
                BorderSide(
                  color: Color(0xFF8D4AE9),
                  width: 1.0,
                ),
              ),
            ),
          );
        },
      )

0 commentaires

0
votes

Vous pouvez essayer d'ajouter une SizedBox avec une height: fixe height: ou une width: ou même les deux entre le contenu souhaité. Une autre solution consiste à ajouter un Padding avec des valeurs égales.

0 commentaires

0
votes

Vous devez d'abord envelopper votre vue de liste avec le conteneur ou la carte ou la boîte de taille si vous voulez le défilement horizontal de la liste. Ensuite, comment vous enveloppez simplement votre largeur de retour avec le rembourrage au rembourrage pour obtenir le rembourrage.

Essayez ce code:

Container(
      height: 100,width: MediaQuery.of(context).size.width,
      child:
      ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 13,
        itemBuilder: (context, i) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 100,
              decoration: BoxDecoration(
                color: Colors.black,
                ),
              ),
            );
        },
      ),
    ),

1 commentaires

N'écrivez pas tous les mots avec la première lettre en majuscule. Publier sur Stack Overflow implique d'utiliser les conventions de la langue anglaise, y compris les règles pour les majuscules et les minuscules dans les mots.