Quelle est la différence entre ListView et SingleChildScrollView dans Flutter ?

Question

J'ai vu quelques exemples utilisant ListView comme principal body élément de Scaffold et dans quelques tutoriels, c'est SingleChildScrollView . Tout ce que j'ai compris, c'est que les deux permettent un certain axe de défilement basé sur la direction qui est configurée, mais je n'arrive pas à savoir quand utiliser l'un plutôt que l'autre ?

ListView :

Scaffold
  body : ListView
    children : Padding/Container

SingleChildScrollView :

Scaffold
  body : SingleChildScrollView
    child : Column

Answer 1

Vous pourriez envisager ListView comme une optimisation de la combinaison de SingleChildScrollView + Colonne .

En utilisant ListView Seuls les éléments visibles sont montés et peints.

D'autre part, en utilisant SingleChildScrollView + Colonne La liste complète des éléments est montée et peinte, même si seuls quelques éléments sont visibles.

La contrepartie est que ListView est moins flexible. Ainsi, pour les mises en page complexes comportant un petit nombre d'éléments, le gain de performance peut ne pas en valoir la peine, auquel cas nous pouvons utiliser la méthode suivante SingleChildScrollView .

Answer 2

ListView que vous utiliserez si vous avez une liste de widgets d'interface utilisateur à rendre, et que le nombre de ces widgets est dynamique.

Par exemple : Vous devez uniquement afficher une liste de contacts sur votre écran et les éléments de la liste sont plus ou moins similaires (du point de vue de l'interface utilisateur et des catégories). Dans ce cas, vous utiliserez un Listview.

A SingleChildScrollView peut être comparé à "ScrollView" dans Android. Supposons que vous ayez beaucoup de widgets UI (Buttons, InputFields, Cards, etc), et qu'ils commencent à sortir de l'écran. Dans ce cas, vos widgets déborderont et vous commencerez à voir des avertissements. Pour résoudre ce problème, vous devez envelopper vos widgets d'interface utilisateur dans un SingleChildScrollView.

Pour votre cas d'utilisation, section "Recommandé", ListView serait un bon choix.

Answer 3

ListView : est utilisé lorsque nous devons rendre le même type de widgets pour n éléments

SingleChildScrollView : est utilisé lorsque nous avons des widgets différents pour n éléments.

Idéalement, dans les deux cas où nous avons besoin d'un défilement, Listview a un comportement par défaut, mais la colonne et les autres widgets n'en ont pas, il faut donc utiliser SingleChildScrollView

Mis à jour : Un point important à prendre en compte lors du choix de ListView

 ListView() -- Render all the items in the list, even if it is not visible. 

`ListView.Builder()` -- Render only visible items on the screen.