ListView 클래스란?
- 선형으로 정렬된 스크롤 가능한 위젯 목록이다.
scrollDirection 옵션
- 스크롤 축을 vertically 혹은 horizontally 변경할 수 있다.
- 다만, 크기 조정을 각각 똑바로 해주어야 한다.
- vertical 일 때, 세로 크기가 무한대면 안되고, horizontal 일 때 가로 크기가 무한대면 안된다.
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 이다.
레퍼런스