Flutter의 리스트뷰(ListView) 사용법

Flutter에서 ListView 위젯은 스크롤 가능한 목록을 만드는 데 사용됩니다. 많은 양의 데이터나 동적 데이터를 표시할 때 매우 유용합니다. ListView는 다양한 구성 옵션을 제공하며, 간단한 목록부터 복잡한 맞춤형 항목까지 다양한 형태의 리스트를 구현할 수 있습니다. 이번 글에서는 Flutter의 ListView 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 ListView 사용법

ListView는 기본적으로 스크롤 가능한 열로 구성된 위젯입니다. 가장 간단한 형태는 children 속성을 사용하여 여러 위젯을 자식으로 가지는 것입니다.

 

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map),
      title: Text('Map'),
    ),
    ListTile(
      leading: Icon(Icons.photo),
      title: Text('Photos'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

 

 

위 코드는 ListTile 위젯을 사용하여 세 개의 항목이 있는 간단한 ListView를 생성합니다.

2. ListView.builder 사용법

많은 양의 데이터나 동적 데이터를 표시할 때는 ListView.builder를 사용하는 것이 효율적입니다. 이 생성자는 항목을 동적으로 생성하여 성능을 최적화합니다.

 

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.person),
      title: Text('Person $index'),
    );
  },
)

 

위 코드는 100개의 항목을 동적으로 생성하는 ListView.builder를 사용하여 리스트를 만듭니다. itemBuilder 콜백은 각 항목을 생성하는 데 사용됩니다.

3. ListView.separated 사용법

항목 사이에 구분선을 추가해야 할 경우 ListView.separated를 사용할 수 있습니다. 이 생성자는 항목과 항목 사이에 구분 위젯을 삽입합니다.

 

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: Icon(Icons.album),
      title: Text('Album $index'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
)

 

 

위 코드는 각 항목 사이에 구분선을 삽입한 ListView.separated를 사용하여 리스트를 만듭니다.

 

 

반응형

 

 

4. ListView.custom 사용법

ListView.custom은 보다 세밀한 제어가 필요한 경우에 사용됩니다. SliverChildDelegate를 사용하여 항목을 정의할 수 있습니다.

 

ListView.custom(
  childrenDelegate: SliverChildBuilderDelegate(
    (context, index) {
      return ListTile(
        leading: Icon(Icons.star),
        title: Text('Star $index'),
      );
    },
    childCount: 20,
  ),
)

 

위 코드는 SliverChildBuilderDelegate를 사용하여 20개의 항목을 생성하는 ListView.custom을 사용하여 리스트를 만듭니다.

5. 스크롤 컨트롤 및 물리적 속성

ListView는 스크롤 동작을 제어하기 위한 다양한 옵션을 제공합니다. scrollDirection, reverse, controller, primary, physics 등의 속성을 사용할 수 있습니다.

 

ListView(
  scrollDirection: Axis.horizontal,
  reverse: true,
  controller: ScrollController(),
  primary: false,
  physics: BouncingScrollPhysics(),
  children: <Widget>[
    Container(
      width: 160.0,
      color: Colors.red,
    ),
    Container(
      width: 160.0,
      color: Colors.blue,
    ),
    Container(
      width: 160.0,
      color: Colors.green,
    ),
    Container(
      width: 160.0,
      color: Colors.yellow,
    ),
  ],
)

 

위 코드는 수평으로 스크롤되는 ListView를 생성하며, 스크롤이 반전되고, 바운스 효과가 적용됩니다.

결론

ListView 위젯은 Flutter에서 스크롤 가능한 목록을 만드는 데 매우 강력하고 유연한 도구입니다. ListView, ListView.builder, ListView.separated, ListView.custom 등 다양한 생성자를 사용하여 다양한 형태의 리스트를 구현할 수 있으며, 스크롤 방향, 물리적 속성 등을 조정하여 사용자 경험을 최적화할 수 있습니다. ListView를 활용하여 풍부하고 다양한 콘텐츠를 효과적으로 표시하는 애플리케이션을 만들어보세요.