플러터 ListView 에서 사용되는 옵션들 간단하게 정리

ListView 클래스란?

• 선형으로 정렬된 스크롤 가능한 위젯 목록이다.

scrollDirection 옵션

• 스크롤 축을 vertically 혹은 horizontally 변경할 수 있다.
• 다만, 크기 조정을 각각 똑바로 해주어야 한다.
• vertical 일 때, 세로 크기가 무한대면 안되고, horizontal 일 때 가로 크기가 무한대면 안된다.
  • 그러면 "BoxConstraints forces an infinite width." 같은 오류를 맞게 된다.

reverse 옵션

• 요소의 순서를 반대로 변경할 수 있다.

NeverScrollableScrollPhysics()

• 이를 physics 속성에 생성하면 스크롤이 불가능해진다.

cacheExtent 옵션

• 뷰포트 밖 영역을 리스트 뷰로 유지한다.
• cacheExtent 가 1000 이라면, 뷰포트 + topCacheExtent: 1000 + bottomCacheExtent: 1000 이렇게 위아래 영역을 불러온채로 유지한다.

itemBuilder 로 리스트 만들기

• ListView.builder() 혹은 ListView.separated() 를 이용할 수 있다.
• 이 경우, 실제로 표시되는 자식에 대해서만 빌더가 호출되므로 자식수가 많은 목록 보기에 적합하다.
  • 실제로 표시되지 않을 때까지는 호출이 지연되는 것 같다.
• ListView 보다 자식 수가 한참 많다면, itemBuilder 를 사용해서 표현하는게 옳다.

Before

child: ListView(
  physics: const BouncingScrollPhysics(),
  children: snapshot.data!
      .map((e) => CustomYoutubePlayer(videoModel: e))
      .toList(),
)

After

ListView.builder(
  physics: const BouncingScrollPhysics(),
  padding: const EdgeInsets.symmetric(vertical: 50, horizontal: 0),
  itemCount: snapshot.data?.length,
  itemBuilder: (BuildContext context, int index) {
    return CustomYoutubePlayer(videoModel: snapshot.data![index]);
  },
)

shrinkWrap 옵션

• ListView 는 부모의 위젯 사이즈만큼 최대한 늘어난다.
• 자식에도 ListView 가 있다면, 이도 부모 사이즈만큼 최대한 늘어난다.
• 최대한 늘어나는 특성 때문에 shrinkWrap 속성이 유용한데, 이를 사용하면 리스트 원소에 필요한 크기만큼만 공간을 사용한다.

itemExtent 와 prototypeExtent 옵션

• 둘 다 자식 위젯의 사이즈를 결정한다.
• itemExtent 는 scrollDirection 에 맞게 사이즈를 결정한다.
• prototypeExtent 는 어떤 랩핑 위젯 안에 가둔다.
  • ex) SizedBox(height: 200, width: 200) 을 이용하면, 이 SizedBox 안에 갇힌다.
• 둘은 동시에 사용될 수 없다.

addAutomaticKeepAlives 옵션

• 화면에서 벗어난 요소를 가비지컬렉션한다.

CustomScrollView 와의 관계

• ListView 는 CustomScrollView.silvers 에 단일 SilverList 가 있는 CustomScrollView 이다.

레퍼런스

• https://jinhan38.com/134