Flutter에서는 리스트 표현을 위해 ListView.builder를 사용합니다.
저도 자주 사용하지만, 어떻게 사용할 수 있는지 자세히 알지 못했습니다.
이번에는 ListView.builder의 사용 방법을 소개합니다.
기본적인 ListView.builder 사용법
먼저, ListView.builder의 기본적인 구현입니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListView.builder with All Properties'),
),
body: MyListView(),
),
);
}
}
class MyListView extends StatelessWidget {
// 리스트 아이템 생성
final List<String> items = List<String>.generate(20, (i) => "Item $i");
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: items.length, // 리스트 아이템 수 지정
// 리스트에 표시할 아이템 표현
itemBuilder: (context, index) {
return ListTile(
title: Text('${items[index]}'),
);
},
scrollDirection: Axis.vertical, // 스크롤 방향을 수직으로 설정
reverse: false, // 순서를 반대로 하지 않음
padding: EdgeInsets.all(8.0), // 리스트 전체에 8픽셀의 여백 추가
primary: true, // 이 리스트가 주 스크롤 뷰인지 지정
shrinkWrap: false, // 리스트 높이를 내용에 따라 조정하지 않음
physics: BouncingScrollPhysics(), // 스크롤 동작 지정
addAutomaticKeepAlives: true, // 각 아이템이 자동으로 유지될지 지정
addRepaintBoundaries: true, // 각 아이템이 재생성 경계를 가질지 지정
addSemanticIndexes: true, // 각 아이템이 시맨틱 인덱스를 가질지 지정
);
}
}
이 코드는 ListView.builder를 사용하여 20개의 리스트 아이템을 표시합니다.
ListView.builder의 프로퍼티
ListView.builder에는 다양한 프로퍼티가 제공됩니다.
itemCount（옵션）
itemCount는 리스트 아이템 수를 지정하는 프로퍼티입니다.
itemCount 프로퍼티는 필수는 아니지만, 설정하면
리스트 아이템 수가 명시적으로 정해져 성능이 향상됩니다.
itemBuilder（필수）
itemBuilder는 각 아이템을 생성하는 프로퍼티입니다.
받은 리스트 아이템을 하나씩 처리하여 표시할 위젯을 반환합니다.
scrollDirection（옵션）
scrollDirection은 리스트의 스크롤 방향을 지정합니다.
수직(Axis.vertical) 또는 수평(Axis.horizontal)으로 설정할 수 있습니다.
기본값은 수직(Axis.vertical)입니다.
reverse（옵션）
reverse는 리스트의 순서를 반대로 할지 여부를 지정합니다.
true로 설정하면 리스트의 표시 순서가 반대로 됩니다. 기본값은 false입니다.
padding（옵션）
padding은 리스트 전체의 안쪽 여백을 지정합니다.
이는 다른 위젯에서도 자주 등장하는 프로퍼티입니다.
예를 들어, EdgeInsets.all(8.0)으로 설정하면 리스트의 네 방향에 8픽셀의 여백이 생깁니다.
primary（옵션）
primary는 예를 들어 중첩된 스크롤 뷰에서
어떤 뷰를 우선으로 스크롤할지 설정합니다.
true로 설정하면 이 리스트가 우선 스크롤됩니다. 기본값은 true입니다.
shrinkWrap（옵션）
shrinkWrap은 리스트가 필요한 만큼의 크기를 가질지 여부를 지정합니다.
true로 설정하면 리스트는 그 내용에 따라 자신의 높이를 결정합니다.
기본값은 false입니다.
physics
리스트의 스크롤 동작을 지정합니다.
BouncingScrollPhysics와 ClampingScrollPhysics가 있습니다.
기본값은 BouncingScrollPhysics입니다.
설명이 어렵기 때문에 실제로 구현해서 비교해보는 것을 추천합니다.
addAutomaticKeepAlives（옵션）
각 아이템이 자동으로 유지될지 여부를 지정합니다.
화면에 보이지 않는 리스트 아이템도 메모리에 유지되어
스크롤이 부드러워지지만, 아이템 수가 많으면 성능이 저하됩니다.
기본값은 true입니다.
addRepaintBoundaries（옵션）
아이템이 재생성 경계를 가질지 여부를 지정합니다.
true로 설정하면 변경이 있을 때 해당 아이템만 다시 그립니다.
false로 설정하면 변경이 있을 때 리스트 전체를 다시 그립니다.
기본값은 true입니다.
addSemanticIndexes（옵션）
각 아이템이 시맨틱 인덱스를 가질지 여부를 지정합니다.
시맨틱 인덱스는 스크린 리더(읽기 기능)나
다른 접근성 도구가 리스트 아이템의 순서나 위치를 정확히 읽을 수 있도록 하는 인덱스입니다.
기본값은 true입니다.
요약
“itemCount”와 “itemBuilder”만 사용했었지만,
조사해보니 다양한 프로퍼티가 있었습니다.
“scrollDirection”이나 “shrinkWrap”은 쓸 만한 장면이 있을 것 같습니다.
또한, Flutter에는 편리한 리스트 위젯이 많으므로 앞으로 소개하려고 합니다.