Flutter의 ListView
ListView는 Flutter에서 스크롤 가능한 리스트를 표시할 때 사용하는 위젯입니다. 여러 개의 아이템을 화면에 나열하고, 스크롤이 가능하도록 만들어주는 기본적인 레이아웃 도구로, 많은 데이터를 표시할 때 매우 유용합니다.
ListView의 주요 특징
- 스크롤 가능: ListView는 기본적으로 스크롤이 가능한 리스트를 제공합니다. 데이터가 화면에 다 보여지지 않을 경우, 사용자가 스크롤하여 나머지 아이템을 볼 수 있습니다.
- 동적 생성:
ListView.builder()
를 사용하면 리스트의 아이템을 동적으로 생성할 수 있습니다. 많은 양의 데이터가 있을 때 유용합니다.
- 정적 리스트:
ListView()
를 사용하면 고정된 아이템으로 구성된 리스트를 생성할 수 있습니다.
ListView의 생성 방법
ListView
는 다양한 방법으로 생성할 수 있습니다. 주로 정적인 리스트와 동적인 리스트로 나뉩니다.
1. 정적인 ListView
고정된 개수의 아이템을 표시하는 경우에 사용됩니다. children
속성으로 위젯들을 전달합니다.
ListView(
children: [
ListTile(
leading: Icon(Icons.map),
title: Text('지도'),
),
ListTile(
leading: Icon(Icons.photo),
title: Text('사진'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('전화'),
),
],
)
2. 동적인 ListView (ListView.builder)
많은 양의 데이터를 효율적으로 처리할 때는 ListView.builder()
를 사용하여 리스트 아이템을 동적으로 생성합니다. itemBuilder
는 각 아이템을 생성하는 함수입니다.
ListView.builder(
itemCount: 100, // 리스트의 아이템 개수
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.person),
title: Text('아이템 $index'),
);
},
)
ListView의 주요 속성
- children: 고정된 리스트 아이템을 넣을 수 있습니다.
- itemCount:
ListView.builder
에서 사용되며, 리스트의 아이템 개수를 지정합니다.
- itemBuilder: 동적으로 리스트의 아이템을 빌드할 때 사용하는 함수입니다.
- scrollDirection: 스크롤의 방향을 지정할 수 있습니다. 기본값은 수직(
Axis.vertical
), 가로로 스크롤하려면 Axis.horizontal
을 사용합니다.
- padding: 리스트 아이템의 패딩을 지정할 수 있습니다.
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('ListView 예제'),
),
body: ListView(
children: [
ListTile(
leading: Icon(Icons.map),
title: Text('지도'),
),
ListTile(
leading: Icon(Icons.photo),
title: Text('사진'),
),
ListTile(
leading: Icon(Icons.phone),
title: Text('전화'),
),
],
),
),
);
}
}
동적 ListView 예시 (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 예제'),
),
body: ListView.builder(
itemCount: 50,
itemBuilder: (context, index) {
return ListTile(
leading: Icon(Icons.person),
title: Text('사용자 $index'),
);
},
),
),
);
}
}
결론
ListView
는 Flutter에서 스크롤 가능한 리스트를 쉽게 구현할 수 있는 위젯입니다. 많은 양의 데이터를 처리하거나, 고정된 아이템을 나열할 때 유용하게 사용됩니다. 특히 ListView.builder
는 동적인 리스트를 효율적으로 처리할 수 있습니다.