ListView
는 가장 일반적으로 사용되는 스크롤 위젯.
스크롤 방향으로 자식을 차례로 표시한다.
기본 생성자. child[]는 명시적인 List<Widget
>을 사용. 자식이 적을때 사용하기 적절하다. 실제로 표시되는 항목만이 아니라 모든 하위항목에 대해 작업을 수행하기 때문(child[]의 위젯수가 많아질수록 성능 문제)
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
)
요청에 따라 하위항목을 빌드하는 IndexedWidgetBuilder를 사용한다. 실제로 표시되는 하위항목에 대해서만 빌더가 호출되므로 하위 항목 수가 많거나 무한한 목록 보기에 적합하다.
final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];
Widget build(BuildContext context) {
return ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 50,
color: Colors.amber[colorCodes[index]],
child: Center(child: Text('Entry ${entries[index]}')),
);
}
);
}
scrollDirection: Axis.horizontal,
를 사용하면 가로 스크롤도 가능
ListView.separated
생성자는 두개의 IndexedWidgetBuilder를 사용. 하위 항목 사이에 항목별 구별하기 위한 위젯을 빌드한다.
return ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
var webtoon = snapshot.data![index];
return Text(webtoon.title);
},
separatorBuilder: (context, index) => const SizedBox(
width: 20,
),
);
ListView.custom
생성자는 하위 모델의 추가 측면을 사용자가 정의하는 기능을 제공하는 SliverChildDelegate를 사용. 예를들어 SliverChildDelegate는 실제로 표시되지 않는 항목의 크기를 추정하는데 사용되는 알고리즘을 제어할 수 있다...
아직 무슨말인지 이해가 안된다....
참조
flutter.dev