본문 바로가기
Flutter

[Flutter] Listview.builder

by dong_seok 2023. 8. 22.

Listview.builder()는 동일한 형태의 view를 여러개 화면에 그릴때 효과적으로 사용할 수 있는 위젯입니다. 기본적으로 itemCount itemBuilder 속성이 필요합니다. itemCount는 용어 그대로 몇 개의 아이템을 표시할 것인지, itemBuilder는 어떤 view를 화면에 그릴지를 선택하는 속성입니다.

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

 

ListView.builder(
                      itemCount: _riview.length,
                      itemBuilder: (BuildContext context, int i) {
                        return Text('Content Number ${i}');
                      }
                  )

 

_riview는 list로 만든 값인데 .length를 사용해서 리스트의 길이를 itemCount로 지정해주었습니다.(길이라서 당연히 int)이제 0값인 i가 itemCount의 값이 될때까지 계속 증가하면서 Text위젯을 화면에 그려줍니다. 

 

 

만약 Listview 항목 사이사이에 구분선을 넣어주고 싶다면 ListView.separated를 사용하여 간편하게 구현 가능합니다.

 

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

 

댓글