comment placer un listview à l'intérieur d'un SingleChildScrollView mais les empêcher de défiler séparément ?

Question

J'ai un arbre de widgets comme ceci :

SingleChildScrollView
   Column
     Container
       ListView(or GridView)

le problème est que lorsque mon arbre de widget est comme ci-dessus, il me donne l'erreur de

BESOIN DE PEINTURE

donc je change mon arbre de widgets comme ceci :

Column
     Container
       ListView(or GridView)

mais dans cette situation, la partie ListView ou GridView défile séparément, et je veux que l'ensemble de l'arbre de widgets défile. comment pensez-vous que je puisse y parvenir ?

Answer 1

Vous pouvez utiliser votre premier arbre à widgets et appliquer les modifications suivantes :

1. Dans chaque ListView y GridView set shrinkWrap: true . Cela corrige le message d'erreur que vous obteniez.
2. Dans chaque ListView y GridView set physics: NeverScrollableScrollPhysics() . Cela désactive le défilement sur ces derniers et vous ne pouvez plus défiler que sur l'écran d'accueil. SingleChildScrollView

Answer 2

Pour moi, le paramétrage de primary à false et de shrinkWrap à true a fonctionné.

ListView(
   primary: false,
   shrinkWrap: true,
),

Answer 3

Comme suggéré par d'autres réponses, vous pouvez le faire en définissant les paramètres suivants shrinkWrap: true, physics: NeverScrollableScrollPhysics() mais la construction d'un listview shrinkwrapped est plus coûteuse que celle d'un listview normal, je pense que ce sera une bonne idée d'utiliser un map() sur la liste.

Column(
  children: <Widget>[
    ...itemList.map((item) {
       return Text(item);
    }).toList(),
  ],
),

Answer 4

Définir primary a false dans votre ListView .

ListView(
   primary: false,
),

Cela devrait l'empêcher de défiler séparément.

Answer 5

Pourquoi cela se produit-il ?

Cela arrive parce que Column y ListView Les deux prennent tout l'espace de l'écran individuellement, ce qui est leur comportement par défaut.

Comment résoudre le problème ?

Pour résoudre le problème ci-dessus, nous devons désactiver le défilement de Listview, ce qui peut être fait par les moyens suivants shrinkWrap y physics propriété

shrinkWrap:true - Il oblige le ListView à n'occuper que l'espace nécessaire, et non la totalité de l'écran.

physique : NeverScrollableScrollPhysics() - Il désactive la fonctionnalité de défilement de ListView, ce qui signifie que maintenant nous avons seulement SingleChildScrollView qui fournit la fonctionnalité de défilement.

Code :

SingleChildScrollView
   Column
     Container
        ListView(
                shrinkWrap: true,
                physics: NeverScrollableScrollPhysics(),
                //...
                )

https://medium.com/flutterworld/flutter-problem-listview-vs-column-singlechildscrollview-43fdde0fa355

Nota: Au-dessus de ListView le comportement sera également appliqué pour GridView .