ListView는 Flutter에서 스크롤 가능한 리스트를 만들기 위해 사용하는 위젯입니다. 많은 데이터 항목을 스크롤 가능한 리스트로 표시할 때 매우 유용합니다. ListView는 여러 종류가 있으며, 각각의 용도에 맞게 사용될 수 있습니다.
일반 리스트뷰 샘플
body: ListView(
children: [
Container(
padding: const EdgeInsets.all(10),
child: const Text(
"title 1",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(10),
child: const Text(
"title 1",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Colors.red,
),
Container(
padding: const EdgeInsets.all(10),
child: const Text(
"title 1",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Colors.red,
)
],
)
위와 같이 listview 의 children 에 여러개의 컴포넌트를 넣는다면 코드가 복잡해지기 때문에 하나의 컴포넌트로 만들필요가 있습니다.
리스트 view 의 아이템을 컴포넌트 화 해보기
body: ListView(
children: [
postContainer(title: "title 1"),
postContainer(title: "title 2", colorData: Colors.blue),
postContainer(title: "title 3", colorData: Colors.green)
],
)Widget postContainer({String title = '', Color colorData = Colors.red}) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
padding: const EdgeInsets.all(10),
child: Text(
title,
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold
),
),
),
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: colorData,
)
],
);
}
title 과 color 를 변수로 사용할 수 있습니다.
만약 가로 스크롤을 원한다면 scrollDirection 을 변경해주면 됩니다.
body: ListView(
scrollDirection: Axis.horizontal,
ListView.Builder
final postList = [
{
"title" : "Sample title 1" ,
"color" : Colors.blue
},
{
"title" : "Sample title 2" ,
"color" : Colors.greenAccent
},
{
"title" : "Sample title 3" ,
"color" : Colors.lime
},
{
"title" : "Sample title 4" ,
"color" : Colors.blue
},
{
"title" : "Sample title 5" ,
"color" : Colors.green
},
{
"title" : "Sample title 6" ,
"color" : Colors.yellow
},
{
"title" : "Sample title 7" ,
"color" : Colors.red
},
];위와 같은 데이터가 선언되어 있을 때 ListView.builder 를 사용하여 쉽게 구현할 수 있습니다.
itemCount 및 itemBuilder 속성을 통하여 list data 를 노출할 수 있습니다.
body: ListView.builder(
itemCount: postList.length,
itemBuilder: (BuildContext con, int index) {
return postContainer(
title: postList[index]["title"] as String,
colorData: postList[index]["color"] as Color
);
}
)
다른 예시
기본 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('Basic ListView'),
),
body: ListView(
padding: EdgeInsets.all(8.0),
children: <Widget>[
ListTile(
title: Text('Item 1'),
),
ListTile(
title: Text('Item 2'),
),
ListTile(
title: Text('Item 3'),
),
],
),
),
);
}
}
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 Example'),
),
body: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
),
),
);
}
}
주요 속성
• children: 리스트에 표시할 위젯 목록을 지정합니다 (ListView).
• itemCount: 리스트 항목의 개수를 지정합니다 (ListView.builder, ListView.separated).
• itemBuilder: 각 항목을 빌드하는 함수입니다 (ListView.builder, ListView.separated).
• separatorBuilder: 항목 사이에 구분자를 빌드하는 함수입니다 (ListView.separated).
• scrollDirection: 리스트의 스크롤 방향을 지정합니다. 기본값은 Axis.vertical입니다.
• padding: 리스트의 패딩을 지정합니다.
• reverse: 스크롤 방향을 반대로 설정할지 여부를 지정합니다. 기본값은 false입니다.
ListView 문서
'프론트엔드 > Flutter' 카테고리의 다른 글
| flutter 스크롤 기능 구현 (0) | 2024.07.17 |
|---|---|
| flutter GridView 사용해보기 (0) | 2024.07.16 |
| flutter button 클릭 및 gestureDetector 클릭 이벤트 (2) | 2024.07.16 |
| flutter stack 위젯 (2) | 2024.07.16 |
| flutter column row 테이블 구성 (0) | 2024.07.16 |
