Flutter ListView (리스트뷰)

 

`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:
  - `ListView`의 `children` 속성에 `ListTile` 위젯 목록을 지정하여 간단한 리스트를 만듭니다.
  - `ListTile` 위젯을 사용하여 아이콘과 텍스트를 포함한 항목을 만듭니다.

- ListView.builder:
  - `itemCount`를 100으로 설정하여 100개의 항목을 생성합니다.
  - `itemBuilder`를 사용하여 각 항목을 동적으로 생성합니다. 여기서 `index`는 항목의 인덱스를 나타냅니다.
  - `ListTile` 위젯을 사용하여 아이콘과 텍스트를 포함한 항목을 만듭니다.

- ListView.separated:
  - `itemCount`를 50으로 설정하여 50개의 항목을 생성합니다.
  - `itemBuilder`를 사용하여 각 항목을 동적으로 생성합니다.
  - `separatorBuilder`를 사용하여 각 항목 사이에 `Divider` 위젯을 추가합니다.

이 예제들은 `ListView`의 다양한 생성자를 사용하여 리스트를 만드는 방법을 보여줍니다. `ListView`는 스크롤 가능한 목록을 쉽게 구현할 수 있는 강력한 위젯입니다.