`ListView`는 Flutter에서 스크롤 가능한 목록을 만드는 데 사용되는 매우 유용한 위젯입니다. 수직 또는 수평으로 아이템들을 나열할 수 있으며, 많은 양의 데이터를 효율적으로 표시하는 데 적합합니다. `ListView`는 여러 생성자를 통해 다양한 방식으로 사용될 수 있습니다.
주요 생성자
1. ListView()
– 기본 생성자입니다. 직접 아이템을 추가하여 리스트를 만듭니다.
2. ListView.builder()
– 항목이 동적으로 생성되도록 설정할 수 있는 생성자입니다. 많은 데이터 항목을 효율적으로 렌더링할 때 사용합니다.
3. ListView.separated()
– 항목 사이에 분리자를 추가할 수 있는 생성자입니다.
4. ListView.custom()
– 커스텀 방식으로 `ListView`를 생성할 때 사용합니다.
주요 속성
– children: `ListView`에 추가할 위젯 목록을 설정합니다.
– itemCount: `ListView.builder`에서 표시할 항목 수를 설정합니다.
– itemBuilder: `ListView.builder`에서 각 항목을 렌더링하는 방법을 설정합니다.
– separatorBuilder: `ListView.separated`에서 각 항목 사이에 추가할 위젯을 설정합니다.
– scrollDirection: 스크롤 방향을 설정합니다. 기본값은 수직 스크롤(`Axis.vertical`)입니다.
– shrinkWrap: `ListView`가 자신의 크기만큼만 차지하도록 설정합니다.
– physics: 스크롤 동작을 설정합니다. 예를 들어, `NeverScrollableScrollPhysics`를 사용하면 스크롤이 비활성화됩니다.
예제 코드
기본 ListView, 정적 사용예
기본 생성자를 사용하여 `ListView`를 만드는 간단한 예제입니다.
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('Flutter ListView Example'),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.map),
title: Text('Map'),
),
ListTile(
leading: Icon(Icons.photo_album),
title: Text('Album'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('Phone'),
),
],
),
),
);
}
}
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('Flutter ListView.builder Example'),
),
body: ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.star),
title: Text('Item $index'),
);
},
),
),
);
}
}
ListView.separated
`ListView.separated`를 사용하여 항목 사이에 분리자를 추가하는 예제입니다.
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('Flutter ListView.separated Example'),
),
body: ListView.separated(
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.star),
title: Text('Item $index'),
);
},
separatorBuilder: (context, index) {
return Divider();
},
),
),
);
}
}
ListView.custom
ListView.custom을 사용하여 복잡한 목록을 만들 수 있습니다. 예를 들어, SliverChildBuilderDelegate를 사용하여 ListView의 항목을 생성할 수 있습니다.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
final List<String> items = List<String>.generate(10000, (i) => "Item $i");
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom ListView Example'),
),
body: ListView.custom(
childrenDelegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(
title: Text('${items[index]}'),
);
},
childCount: items.length,
),
),
),
);
}
}
코드 설명
– 기본 ListView:
– `ListView`의 `children` 속성에 `ListTile` 위젯 목록을 지정하여 간단한 리스트를 만듭니다.
– `ListTile` 위젯을 사용하여 아이콘과 텍스트를 포함한 항목을 만듭니다.
– ListView.builder:
– `itemCount`를 100으로 설정하여 100개의 항목을 생성합니다.
– `itemBuilder`를 사용하여 각 항목을 동적으로 생성합니다. 여기서 `index`는 항목의 인덱스를 나타냅니다.
– `ListTile` 위젯을 사용하여 아이콘과 텍스트를 포함한 항목을 만듭니다.
– ListView.separated:
– `itemCount`를 50으로 설정하여 50개의 항목을 생성합니다.
– `itemBuilder`를 사용하여 각 항목을 동적으로 생성합니다.
– `separatorBuilder`를 사용하여 각 항목 사이에 `Divider` 위젯을 추가합니다.
이 예제들은 `ListView`의 다양한 생성자를 사용하여 리스트를 만드는 방법을 보여줍니다. `ListView`는 스크롤 가능한 목록을 쉽게 구현할 수 있는 강력한 위젯입니다.