Warum ist die Listenansicht meiner flutter App nicht so flüssig wie die flutter gallery App?

Question

Ich habe einen Release Build meiner Scroll Demo App mit Flutter erstellt. Ich frage mich, warum das Scrollen mit der Listview meiner App NICHT so flüssig ist wie die Flattern-Galerie App. Ich habe LG G5 für diesen Test verwendet.

Hier a link to my app's demo

Edit: hier ist der Code.

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; 
} 

Erlebt jemand das gleiche auch?

Danke!

Answer 1

Das Problem mit Ihrem Code ist, dass Sie die reguläre ListView verwenden, die nicht für Listen geeignet ist, die viele Elemente haben. Alle diese 40 Widgets werden im Speicher gehalten, was das Janky Scrolling-Erlebnis verursacht, an dem Sie leiden.

Wenn Sie eine große Anzahl oder unbestimmte Anzahl von Elementen haben, sollten Sie stattdessen ListView.builder verwenden. Es erstellt nur die sichtbaren Listenelemente auf Abruf, was es möglich macht, dass noch größere Listen reibungslos durchlaufen werden.

Hier ist ein vollständiges Beispiel, wie Sie Ihre Liste wandern würde die Builder-Ansatz zu verwenden:

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"), 
      ); 
      }, 
     ), 
    ), 
    ); 
    } 
} 

Beachten Sie, dass viele Artikel gibt es in diesem Fall 200, aber das Scrollen ist noch glatt butter.