Flutter의 ListView.builder() 사용법

ListView.builder의 간단한 사용법

ListView.builder에 몇 개의 항목을 만들 것이고 몇 번째 항목에는 어떤 View를 그려주자라는 것을 알려주어야 한다. itemCount가 이 몇 개에 해당하고, itemBuilder가 어떤 View를 그려주자 라는 것에 해당한다.

• itemCount : int값이며 ListView 항목들의 총개수에 해당한다. 단, 주어지지 않으면 무한히 항목을 만든다.
• itemBuilder(BuildContext ctx, int idx) : idx번째에 해당하는 항목에 그려질 View를 반환하는 함수이다. idx는 0부터 시작한다.

아래의 코드는 각 항목에 "Content Number"에 이어 해당하는 숫자가 적힌 Text를 가지는 ListView를 그릴 것이다.

ListView.builder(
    itemCount: 100,
    itemBuilder: (BuildContext ctx, int idx) {
        return Text('Content Number ${idx}');
    }
)

아래는 위 코드를 사용해 만든 결과이다.

추가로 다른 값들을 주어 ListView가 항목을 역순으로 출력하거나, 상하가 아닌 좌우 스크롤을 하도록 할 수 있다.

• reverse : true 인 경우 항목을 역순으로 그리도록 함.
• scrollDirection : Axis.horizontal 인 경우 가로방향으로 항목이 나열되며, 가로방향으로 스크롤이 됨.

ListView.separated 사용법

ListView의 항목 사이에 구분선을 넣어주고 싶을 때가 존재한다. ListView.builder에서 itemCount를 적절히 늘리고 itemBuilder에서 idx에 따라 내용을 그리거나 구분자를 그리도록 코드를 짤 수 있다. 그러나 이것이 귀찮은 경우 ListView.separated를 사용하면 편하다.

ListView.builder와 마찬가지로 몇 번째 항목에 어떤 View를 그릴지 결정하는 itemBuilder와 몇 개를 그릴지 결정하는 itemCount는 ListView.separated에서도 동일하다. 몇 번째 구분자를 어떤 View로 그릴 것인지를 알려주기 위해 separatorBuilder를 넘겨주어야 한다.

• separatorBuilder(BuildContext ctx, int idx) : idx번째 구분선을 어떤 View로 그려줄지 결정하는 함수이다.

아래 예제는 ListView.builder와 같은 내용을 출력하나, 항목 사이에 구분선이 존재한다.

 ListView.separated(
    itemCount: 100,
    itemBuilder: (BuildContext ctx, int idx) {
      return Text('Content Number ${idx}');
    },
    separatorBuilder: (BuildContext ctx, int idx) {
      return Divider();
    },
 )

아래는 위 코드를 사용해 만든 결과물이다.