ListView

이원석·2023년 11월 20일
0

Flutter

목록 보기
21/46

ListView

ListView는 가장 일반적으로 사용되는 스크롤 위젯.
스크롤 방향으로 자식을 차례로 표시한다.

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')),
    ),
  ],
)

ListView.builder

요청에 따라 하위항목을 빌드하는 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

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

ListView.custom생성자는 하위 모델의 추가 측면을 사용자가 정의하는 기능을 제공하는 SliverChildDelegate를 사용. 예를들어 SliverChildDelegate는 실제로 표시되지 않는 항목의 크기를 추정하는데 사용되는 알고리즘을 제어할 수 있다...
아직 무슨말인지 이해가 안된다....

참조
flutter.dev

0개의 댓글