[개발] Flutter

[Flutter] ListView 란?

  • -
반응형

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는 동적인 리스트를 효율적으로 처리할 수 있습니다.

반응형

'[개발] Flutter' 카테고리의 다른 글

[Flutter] InkWell 란?  (0) 2024.10.03
[Flutter] itemBuilder 란?  (0) 2024.10.02
[Flutter] jsonDecode 란?  (0) 2024.09.30
[Flutter] CircularProgressIndicator 란?  (0) 2024.09.29
[Flutter] snapshot 란?  (1) 2024.09.28
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.