4
votes

Remplissage inférieur après ListView.Builder

J'ai une vue de liste à l'intérieur d'une feuille du bas .. comme ceci:

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Directionality(
      textDirection: globals.getDirection(),
      child: Container(
        margin: EdgeInsets.only(
          right: 10.0,
          left: 10.0),
        height: MediaQuery.of(context).size.height / 2,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Flexible(
              child: TextField()
            ),
            Expanded(
              child: ListView.builder(
                shrinkWrap: false,
                itemCount: nationalities.length,
                itemBuilder: (BuildContext context, int index) {
                  return new Padding(
                    padding: EdgeInsets.only(top: 10.0),
                    child: GestureDetector(
                      onTap: () {
                        setState(() {
                          _data.nationality = nationalities[index];
                        });
                        Navigator.pop(context);
                      },
                      child: Text(
                        nationalities[index],
                        textAlign: TextAlign.center,
                      ),
                    ));
                },
              ),
            ),
          ),
        );
  }
);

Le problème que j'ai un énorme espace blanc en bas, je ne sais pas d'où il vient .. comme vous pouvez voir sur la capture d'écran:

Comment supprimer cet espace blanc et faire en sorte que la liste se développe à la place?

flutter dart

0 commentaires

3 Réponses :

2
votes

Il s'agit d'un bogue causé par le fait d'avoir un widget Flexible et un widget Expanded dans la même ligne / colonne, https://github.com/flutter/flutter/issues/20575

Vous pouvez résoudre ce problème en supprimant le widget Flexible qui encapsule votre TextField .

1 commentaires

Merci beaucoup!

14
votes

L'utilisation d'un widget développé permet à un enfant d'une ligne, d'une colonne ou d'un Flex de se développer pour remplir l'espace disponible dans l'axe principal (par exemple, horizontalement pour une ligne ou verticalement pour une colonne). Si plusieurs enfants sont développés, l'espace disponible est divisé entre eux en fonction du facteur flexible. C'est peut-être ton problème. Le supprimer peut vous aider. Prochaine chose ... L'utilisation d'un widget flexible donne à l'enfant d'une ligne, d'une colonne ou d'un flex la flexibilité de s'étendre pour remplir l'espace disponible dans l'axe principal (par exemple, horizontalement pour une ligne ou verticalement pour une colonne), mais contrairement à Expanded, Flexible ne le fait pas demander à l'enfant de remplir l'espace disponible. Chose suivante:

Par défaut, ListView remplira automatiquement les extrémités déroulantes de la liste pour éviter les obstructions partielles indiquées par le remplissage de MediaQuery. Pour éviter ce comportement, remplacez par une propriété de remplissage zéro.

  MediaQuery.removePadding(
  context: context,
  removeTop: true,
  child: ListView(...),
)

Deuxième option

    ListView(
  padding: EdgeInsets.zero,
  ...);

Désolé pour l'explication Exrta;

1 commentaires

Merci beaucoup d'avoir aidé et expliqué! :RÉ

0
votes

J'ai rencontré le même problème lors de l'utilisation de ListView.builder () dans ModalBottomSheet. Je dois utiliser Column au lieu de:

sortList() {
var itemList = <Widget>[
  Text('1'),
  Text('2'),
];

// for loop to add more items here 

return Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: itemList);
}

La suppression de mainAxisSize: MainAxisSize.min reproduira le problème.

0 commentaires