Pourquoi la liste de lecture de mon application de flutter ne défile pas aussi facilement que l'application de galerie de flutter?

Question

J'ai créé une version de mon application de démonstration de défilement en utilisant Flutter. Je me demande pourquoi le défilement listview de mon application n'est pas aussi lisse que l'application flutter gallery. J'ai utilisé LG G5 pour ce test.

est ici a link to my app's demo

Edit: est le code ici.

class ListViewSample extends StatelessWidget { 
@override 
Widget build(BuildContext buidContext) { 
return new Container(
    child: new Center(
    child: new ListView(
     children: createListTiles(), 
    ), 
    ) 
); 
} 

List<Widget> createListTiles() { 
List<Widget> tiles = <Widget>[]; 
    for(int i = 0; i < 40; i++) { 
    int count = i + 1; 
    tiles.add(
    new ListTile(
     leading: new CircleAvatar(
     child: new Text("$count"), 
     backgroundColor: Colors.lightGreen[700], 
    ), 
     title: new Text("Title number $count"), 
     subtitle: new Text("This is the subtitle number $count"), 
    ) 
); 
} 
return tiles; 
} 

Est-ce que quelqu'un connaît la même chose?

Merci!

Answer 1

Le problème avec votre code est que vous utilisez le ListView normal, ce qui n'est pas approprié pour les listes qui ont beaucoup d'éléments. Tous ces 40 widgets sont gardés en mémoire, ce qui provoque l'expérience de défilement janky dont vous souffrez.

Si vous avez un grand nombre ou un nombre indéfini d'éléments, vous devez utiliser ListView.builder à la place. Il construit uniquement les éléments de liste visibles à la demande, ce qui permet de faire défiler les listes encore plus volumineuses.

Voici un exemple complet comment vous migrer votre liste d'utiliser l'approche du constructeur:

import 'package:flutter/material.dart'; 

class ListViewSample extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     body: new Center(
     child: new ListView.builder(
      itemCount: 200, 
      itemBuilder: (context, index) { 
      final count = index + 1; 

      return new ListTile(
       leading: new CircleAvatar(
       child: new Text("$count"), 
       backgroundColor: Colors.lightGreen[700], 
      ), 
       title: new Text("Title number $count"), 
       subtitle: new Text("This is the subtitle number $count"), 
      ); 
      }, 
     ), 
    ), 
    ); 
    } 
} 

Notez qu'il ya beaucoup d'éléments, dans ce cas 200, mais le défilement est encore beurré lisse.