[Flutter] 플러터 ListView

플러터에서 ListView를 구성하는 방법은 총 4가지가 있습니다.

 

1. The default constructor takes an explicit List<Widget> of children.

- 기본 생성자인 ListView를 호출하고 children으로 전달하는 방법.

- 적은 양의 데이터를 보는데에 적합합니다.

ListView(
  padding: const EdgeInsets.all(8),
  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')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

 

2. The ListView.builder constructor takes an IndexedWidgetBuilder

- 생성자는 필요에 따라 자식을 빌드하는 IndexedWidgetBuilder를 호출하는 방법

- 실제로 표시되는 자식에 대해서만 호출되기 때문에 많은 양, 또는 무한한 목록을 보기에 적합합니다.

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);

 

3. The ListView.separated constructor takes two IndexedWidgetBuilder

- 생성자는 두 개의 IndexedWidgetBuilder를 사용합니다.

- itemBuilder와 separatedBuilder를 빌드하고 item사이에 구분선을 표시합니다.

- 고정된 수의 자식이 있는 목록을 보는데 적합합니다.

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.separated(
  padding: const EdgeInsets.all(8),
  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(),
);

 

4. The ListView.custom constructor takes a SliverChildDelegate

- 생성자는 자식 모델의 추가적인 부분을 사용자가 지정하는 기능을 제공하는 SliverChildDelegate 를 사용합니다.