Flutter 기본_ListView

ListView

Flutter에서 ListView는 ListTile로 구성된다.(ListTile을 행이라고 생각하면 쉽다.)

 

ListView 사용법

ListView를 사용하기 위해서는 ListView.builder의 속성중 하나인 itemBuilder를 사용해야한다.

itemBuilder는 익명함수 형태의 콜백함수를 받으며, 인자는 BuildContext와 행 반복자인 i를 받는다.

itemBuilder는 행 하나하나의 item을 구성하는 것이라고 생각하면 쉽다.

 

예시

위의 예시를 보면 ListView를 구현하는 코드는 RandomWordState 클래스 안에 있다.

_suggestions는 WordPair로 구성된 배열이다.

ListView를 리턴하는 위젯은 _buildSuggestions이다.

_buildSuggestions위젯을 살펴보자.

padding에 EdgeInsets.all을 통해 top, bottom, right, left 모두 paddig을 부여한다.

itemBuilder를 보면 행 반복자인 i값이 홀수일때는 Divider()를 리턴한다.(Divider()는 구분선 위젯이다.)

i ~/ 2는 i값을 2로 나눈 후의 정수 결과값을 의미한다. i ~/ 2값은 Divider()를 제외한 ListView에 있는 단어의 수를 계산하기 위한 값이다. 해당 값이 _suggestions의 길이보다 길거나 같으면 generateWordPairs().take()로 10개의 단어를 가져와 _suggestions에 추가한다. (이렇게 하면 무한 스크롤이 가능하게 된다. (계속 값을 추가하므로))

그리고 _buildRow위젯을 리턴한다.

_buildRow위젯은 ListTile을 리턴한다.(앞서 얘기했듯이 ListView의 행이라고 생각하면 된다.)

 

이렇게 ListView를 구현하면 된다.

 

정리

ListView는 ListTile로 구성된다.

ListView는 ListView.builder로 세팅하고, itemBuilder 속성을 통해 ListView의 item들을 구성한다.

그리고 이 item들을 ListTile에 올리면 ListView 구현이 끝난다.