ListView
HamsterStudent
return ListView(
children: [
for (var webtoon in snapshot.data!) Text(webtoon.title),],
);
- ListView를 이런 식으로 쓰면 한번에 모든 데이터를 가져오므로 과부하가 걸릴 수 있음
개선 : ListView.builder
return ListView.builder(
scrollDirection: Axis.horizontal,
// data의 갯수를 말해줌으로써 성능에 이점을 줌
itemCount: snapshot.data!.length,
// ListView.builder가 아이템을 build할 때 호출하는 함수
itemBuilder: (context, index) {
var webtoon = snapshot.data![index];
return Text(webtoon.title);
},
);
- itemCount, itemBuilder 필수로 입력
- 보이는 부분만 build함으로써 성능에 이점
- 빌드할 항목의 갯수 미리 전달해서 메모리 활용에 도움을 준다
더 개선 : ListView.seperated
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,
),
);
- 각 리스트 사이사이에 간격을 넣을 때 사용.
- 리스트 ‘사이’에 옵션을 넣는 것이기 때문에 맨 처음부분엔 옵션이 들어가지 않음
- itemCount, itemBuilder, separatorBuilder 필수로 입력
- separatorBuilder에 텍스트나 이모지, 위젯 등 뭐든 넣어도 됨
Written on
2023-05-17
,
updated at
2023-05-17
.
Author: HamsterStudent
Tags: