Flutter App - ListView
# 스크롤 위젯
> 데이터를 순차적으로 표현
# 동작 방식 ( 총 4가지 )
> default 생성자 - child 로 List<Widget> 을 호출하여 동작
- 목록 보기에 표시될 수 있는 자식에 대해 작업을 수행
- 데이터량이 작은 경우에 이용
> 소스 코드
ListView(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')), ),
],)
> builder 생성자 - child 를 빌드하는 IndexedWidgetBuilder 를 호출하여 동작
- 목록 보기에 표시되 고 있는 자식에 대해 작업을 수행 ( 빌더가 호출됨 )
- 데이터량이 많은 경우에 이용
> 소스 코드
final List<String> entries = <String>['A', 'B'];
final List<int> colorCodes = <int>[600, 500];
ListView.builder(itemCount: entries.length,
itemBuilder: (BuildContext context, int index) {
return Container(height: 50, color: Colors.amber[colorCodes[index]], child: Center(child: Text('Entry ${entries[index]}')),);
});
> separated 생성자 - child 를 빌드하는 2개의 IndexedWidgetBuilder 를 호출하여 동작
- 데이터 항목을 separatorBuilder 추가하고 마찬가지로 데이터 사이에 나타나는 구분 기호를 생성
- 고정된 수의 데이터량이 있는 경우에 이용
> 소스 코드
final List<String> entries = <String>['A', 'B'];
final List<int> colorCodes = <int>[600, 500];
ListView.separated(itemCount: entries.length,
itemBuilder: (BuildContext context, int index){
return Container(height: 50, color: Colors.amber[colorCodes[index]], child: Center(child: Text('Entry ${entries[index]}')),);
},
separatorBuilder: (BuildContext context, int index) => const Divider(),
);
> custom 생성자 - 사용자 지정할 수 있는 기능을 제공하는 SliverChildDelegate 를 호출하여 동작
- 실제로 표시되지 않는 자식의 크기를 추정하는 데 사용되는 알고리즘 제어
> 소스 코드
ListView(shrinkWrap: true, padding: const EdgeInsets.all(20.0),
children: const <Widget>[
Text("I'm dedicating every day to you"),
Text('Domestic life was never quite my style'), ],
)
# 추가 설정
> 스크롤 뷰의 초기 스크롤 오프셋 제어
- ScrollController.initialScrollOffset 속성에 값 설정
> ListView 는 목록의 스크롤 가능한 말단을 자동으로 채움
- MediaQuery 의 패딩이 나타내는 부분적인 방해를 방지