[flutter]플러터 리스트뷰 ListView 사용법

SingleChildScrollView 사용법

ReorderableListView 사용법

1. ListView

 

1)기본 예제

가장기본적인 사용법입니다. ListView의 childeren속성 아래 스크롤할 위젯들을 나열하면 됩니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: <Widget>[
            ListTile(title: Text('첫 번째 항목')),
            ListTile(title: Text('두 번째 항목')),
            ListTile(title: Text('세 번째 항목')),
            // ...
          ],
        ),
      ),
    );
  }
}

 

2) ListView.builder()

listView와 차이점?

ListView

 - 목록의 전체 데이터를 미리 생성하고, 화면에 표시할 부분만 렌더링합니다.

- 미리 생성된 목록을 사용하기 때문에  ListView.builder에 비해 성능이 좋습니다.

- 목록의 데이터가 변경되어도 자동으로 업데이트되지 않습니다. 데이터가 변경된 경우에는 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(
        body: ListView.builder(
          itemCount: 10,
          itemBuilder: (context, index) {
            return ListTile(title: Text('항목 $index'));
          },
        ),
      ),
    );
  }
}

 

 

3) ListView.saperate()

itemBuilder를 통해 하나의 위젯을 렌더링할때마다 실행되는 부분이 separatorBuilder 부분입니다.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView.separated(
          itemCount: 10,
          itemBuilder: (context, index) {
            return ListTile(title: Text('항목 $index'));
          },
          separatorBuilder: (context, index) {
            return Divider(); //하나의 위젯이 그려질때마다 구분선 추가
          },
        ),
      ),
    );
  }
}