Flutter์์ ListView ์ฌ์ฉ์ ๋งค์ฐ ๊ฐ๋จํฉ๋๋ค. 3๊ฐ์ ํต์ฌ ListView ๊ตฌํ ๋ฐฉ๋ฒ์ ์์๋ณด๊ณ ๊ฐ๊ฐ์ ์์ ๋ฅผ ํ์ธํ๋ฉด์ ListView๋ฅผ ์ตํ๋ด ์๋ค.
์ด๋ฒ ๊ธ์์ ์์๋ณผ ๋ด์ฉ
- ListView๋?
- ListView()
- ListView.builder()
- ListView.separated()
ListView๋?
ListView๋ Flutter์์ ์คํฌ๋กค์ ๊ตฌํํ๊ธฐ ์ํด ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ์ฉํ๋ ์์ ฏ์ ๋๋ค. ๊ตฌํํ๊ธฐ๋ ์ฝ๊ณ ์ ์ฐํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๊ณ ์์ต๋๋ค. vertical, horizontal ์คํฌ๋กค ๋ฐฉํฅ์ ๋ฐ๊ฟ ์๋ ์์ผ๋ฉฐ, ์๋์์๋ ๋ณด์๊ฒ ์ง๋ง ListView.sperated() ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ ์์ดํ ์ฌ์ด์ ๋ค๋ฅธ ์์๋ฅผ ์ง์ด๋ฃ์ ์๋ ์์ต๋๋ค. ์๋์์ ListView ๊ตฌํ์ ๋ํ์ 3๊ฐ์ง๋ฅผ ์์๋ด ์๋ค.
ListView()
ListView๋ ๊ธฐ๋ณธ์ ์ผ๋ก children:[] ์ ํตํด ๊ตฌํํ ์ ์์ต๋๋ค. Column, Row์ ๊ฐ์ด children:[] ์ ์ค์ ํ๋ฉด ์คํฌ๋กค ๊ฐ๋ฅํ ListView๊ฐ ์์ฑ๋ฉ๋๋ค. ์๋์ ์ฝ๋๋ฅผ ํตํด ์ข ๋ ์์ธํ ํ์ ํด๋ณด์ธ์.
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')),
),
],
)
ListView.builder()
๋ค์์ ListView.builder()๋ฅผ ํตํด ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋๋ค. itemCount ์ itemBuilder๋ฅผ ๊ตฌํํ์๋ฉด ๋๋๋ฐ์. itemCount๋งํผ itemBuilder๋ฅผ ์คํ์์ผ widget์ ๋ฐํํฉ๋๋ค. ์ด๋ ๊ฒ ๋๋ฉด ๋ฐํํ widget๋ค์ด ์์ฌ ListView๋ฅผ ์์ฑํ๊ฒ ๋๋ ๊ฒ ์ ๋๋ค. ์๋์ ์ฝ๋๋ฅผ ํ์ธํด์ฃผ์ธ์.
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]}')),
);
}
);
ListView.separated()
ListView.sperated()๋ ๊ฐ ์์ ์ฌ์ด์ ๋ค๋ฅธ ์์๋ฅผ ๋ฃ๊ฒ ํด์ฃผ๋ ๋ฐฉ๋ฒ์ธ๋ฐ์. ์๋ฅผ ๋ค์ด ListView ๊ฐ ์์ ์ฌ์ด์ Divider๋ฅผ ๋ฃ๊ณ ์ถ์๋๋ ์ด ๋ฐฉ๋ฒ์ ์ฌ์ฉํ๋ฉด ๋ฉ๋๋ค. ๊ตฌํ๋ฐฉ๋ฒ์ ListView.builder()์์ seperatedBuilder๋ง ์ถ๊ฐ์ ์ผ๋ก ๊ตฌํํด์ฃผ์๋ฉด ๋ฉ๋๋ค. ์๋์ ์ฝ๋์ ์ฌ์ง์ ํ์ธํด์ฃผ์ธ์.
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(),
);
์ฐธ๊ณ ์๋ฃ
'Flutter' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Flutter / Flutter GetX์ ๋ํด ์์๋ณด์ (0) | 2022.03.04 |
---|---|
Flutter ๊ธฐ์ด - 2ํ : ํ๋ฉด์ ๊ทธ๋ ค์ง๋ ๋ชจ๋ ๊ฒ์ ์์ ฏ์ด๋ค (0) | 2022.02.12 |
Flutter BLoC ๊ฟํ - 1ํ : BlocProvider ๋ฐฑ๋ฐฐ ์ฌ์ฉํ๊ธฐ (0) | 2022.01.21 |
Flutter ๊ธฐ์ด - 1ํ : Flutter ์ ๊ณผ๊ฑฐ, ํ์ฌ, ๋ฏธ๋ (0) | 2021.12.17 |
Flutter Web 1ํ : ๊ตฌ๊ธ ์ฝ๋๋ฉ ๊ตฌํ (0) | 2021.07.20 |