ListView
ListView: Creates a scrollable, linear array of widgets from an explicit List. This constructor is appropriate for list views with a small number of children because constructing the List requires doing work for every child that could possibly be displayed in the list view instead of just those children that are actually visible.
→ ListView의 생성자에서 아이템(ListTile)을 직접 구현하여 ListView를 구성하는 방법이다. 위젯이 생성될시 리스트뷰안의 차일드를 모두 생성해서 보여준다. 모든 아이템이 생성되고 리스트뷰에 등록된 후에 리스트뷰가 화면에 출력된다.
💫 소수의 차일드를 가질 경우 쓰는것이 적절하다.
body: ListView(
children: <Widget>[
ListTile(
//leading. 타일 앞에 표시되는 위젯. 참고로 타일 뒤에는 trailing 위젯으로 사용 가능
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
)
],
),
문제점
그러나 천개 단위 혹은 만개 단위의 아이템을 가지를 리스트를 생성자를 통해 생성한다면 문제가 발생할 수 있다. 모든 아이템이 생성되고 메모리에 로딩된 후에 리스트뷰가 출력되기 때문에 많은 시간과 자원이 소비되어야 한다. 그리고 대부분의 경우 사용자는 리스트의 일부만 보고 앱을 종료할 가능성이 더 많다. 그래서 그 때 쓰는 것이 ListView.builder이다.
ListView.builder
ListView.builder Creates a scrollable, linear array of widgets that are created on demand. This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.
- LazyList : sd카드나 서버로부터 이미지를 천천히 불러온다. 이미지를 그때그때 불러오는 방식이다.
ListView.builder는 그때그때 필요할 때 파일을 저장소나 서버에서 불러온다. 그러므로 다량의 파일을 불러올 때 이것을 쓰면 좋다. 인스타그램을 실행했을 때 전세계인의 모든 피드를 불러온다면 모바일폰은 폭발할 것이다. 하지만 이 위젯을 쓰면 보는 부분만 파일들을 불러오기 때문에 콜을 효율적으로 할 수 있다.
💫 대용량의 아이템을 쓸 때 적절하다.
body: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text('${items[index]}'),
);
},
),
- itemCount : 불러올 listview의 갯수를 의미한다. 갯수만큼 열거된다. 일반적으로 갯수에 맞게 열거되어야 함으로 변수의 길이를 사용한다. ex) items.length
- itemBuilder : ListView에 구성될 구성요소이다.
ListView.separated
ListView.separated는 ListView.builder에 구분선이 추가된 형태이다.
afeArea(
child: ListView.separated(
itemCount: datas.length,
itemBuilder: (BuildContext context, int index) {
return DemoListTile(datas[index]);
},
// Divider 로 구분자 추가.separatorBuilder: (BuildContext context, int index) => const Divider(),
),
),
);
}
}
