내 플러터 응용 프로그램의 목록보기가 플러터 갤러리 응용 프로그램처럼 부드럽지 않은 이유는 무엇입니까?

Question

Flutter를 사용하여 내 스크롤 데모 응용 프로그램의 릴리스 빌드를 만들었습니다. 왜 내 애플 리케이션의 목록보기 스크롤이 펄럭 갤러리 애플 리케이션처럼 부드럽지 않은지 궁금해. 나는 LG G5를이 테스트에 사용했다. 여기 코드입니다 :

여기 a link to my app's demo

편집합니다.

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

다른 사람도 동일한 경험을합니까?

감사합니다.

Answer 1

코드에 문제가있는 것은 많은 항목이있는 목록에는 적합하지 않은 일반 ListView을 사용하고 있다는 것입니다. 40 개의 위젯은 모두 메모리에 보관되어 사용자가 겪고있는 janky 스크롤링 경험을 유발합니다.

많은 수의 항목이 있거나 무기한이 많은 경우 ListView.builder을 사용해야합니다. 필요에 따라 눈에 보이는 목록 항목 만 작성하므로 더 큰 목록을 부드럽게 스크롤 할 수 있습니다.

가 많은 항목이 경우 200,하지만 스크롤이 여전히 있음을

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

참고 부드러운 버터 :

다음은 빌더 방법을 사용하는 목록을 마이그레이션 얼마나 완전한 샘플입니다.