[Flutter] #9 ListView, GridView, PageView 위젯

ListView_GridView_PageView Test Code

---

ListView 사용법과 주요 속성

ListView는 여러 항목을 세로로 나열할 때 사용하는 가장 일반적인 스크롤 가능한 위젯입니다. 주로 다음과 같은 방식으로 사용됩니다:

 

1. 일반적인 ListView 사용 (적은 데이터)
children을 명시적으로 전달하는 방식으로, 항목이 적을 때 유용합니다

ListView(
  children: [
    ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.amber,
        child: Text('1'),
      ),
      title: Text('item1'),
      subtitle: Text('item sub...'),
      trailing: IconButton(
        onPressed: () {
          print('item1 클릭 했어요');
        },
        icon: Icon(Icons.more_horiz),
      ),
    ),
    ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.amber,
        child: Text('2'),
      ),
      title: Text('item2'),
      subtitle: Text('item sub...'),
      trailing: IconButton(
        onPressed: () {
          print('item2 클릭 했어요');
        },
        icon: Icon(Icons.more_horiz),
      ),
    ),
  ],
);

 

 

2. ListView.builder 사용 (동적 데이터)
itemCount와 itemBuilder를 사용해 동적으로 항목을 생성하는 방식입니다.

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.amber,
        child: Text('${index + 1}'),
      ),
      title: Text('Item ${index + 1}'),
      subtitle: Text('Item sub ${index + 1}'),
      trailing: IconButton(
        onPressed: () {},
        icon: Icon(Icons.add),
      ),
    );
  },
);

 

 

3. ListView.separated 사용 (구분선 포함)
ListView.builder와 동일하지만 항목 사이에 구분선이 들어갑니다.

ListView.separated(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Item ${index + 1}'),
    );
  },
  separatorBuilder: (context, index) {
    return Divider();
  },
);

 

주요 ListView 속성

• reverse: true로 설정하면 리스트가 아래에서 위로 표시됩니다. (주로 위에서 아래로 스크롤되는 기본 설정과 반대)
• padding: 리스트의 내/외부 여백을 설정합니다. EdgeInsets로 설정 가능합니다.
• itemCount: 리스트 아이템의 개수를 동적으로 설정할 때 사용합니다. (ListView.builder 및 ListView.separated에서 사용)
• itemBuilder: 각 아이템을 동적으로 정의합니다. (ListView.builder 및 ListView.separated에서 사용)
• physics: 스크롤 방식을 설정합니다. (예: BouncingScrollPhysics 또는 ClampingScrollPhysics)

 

---

 

GridView 위젯

 

GridView는 리스트 뷰와 비슷하지만 한 줄에 여러 개의 항목을 나열할 수 있는 그리드 형태의 레이아웃입니다. 주로 GridView.builder를 사용하여 동적으로 항목을 생성합니다.

1. GridView 사용법
   • crossAxisCount: 한 줄에 표시할 항목의 개수 설정.
   • crossAxisSpacing과 mainAxisSpacing: 항목 간의 간격을 설정.

   GridView.builder(
     scrollDirection: Axis.vertical,
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
       crossAxisCount: 3, // 한 줄에 3개
       crossAxisSpacing: 16.0, // 가로 간격
       mainAxisSpacing: 16.0, // 세로 간격
     ),
     itemCount: 20,
     itemBuilder: (context, index) {
       return Container(
         color: Colors.blue,
         child: Center(child: Text('${index}')),
       );
     },
   );
   

 

PageView 위젯

 

PageView는 페이지를 좌우로 스와이프하여 이동할 수 있는 위젯입니다. 각 페이지를 스크롤할 때마다 새로운 페이지가 표시됩니다.

1. PageView 사용법
   • controller: PageController를 사용하여 페이지의 초기값과 뷰포트 비율을 설정할 수 있습니다.
   • viewportFraction: 현재 페이지가 화면에서 차지하는 비율을 설정할 수 있습니다. (0.7이면 현재 페이지가 화면의 70%를 차지)

   PageView(
     controller: PageController(
       initialPage: 2,
       viewportFraction: 0.9, // 현재 페이지가 화면의 90%를 차지
     ),
     children: [
       Container(color: Colors.red),
       Container(color: Colors.blue),
       Container(color: Colors.green),
     ],
   );
   

요약

• ListView: 주로 세로로 스크롤되는 리스트를 만들 때 사용하며, ListView.builder와 ListView.separated를 사용하여 동적 리스트 및 구분선 추가가 가능합니다.
• GridView: 항목을 그리드 형태로 나열할 때 사용하며, crossAxisCount로 한 줄에 표시할 항목의 수를 설정합니다.
• PageView: 페이지를 좌우로 스와이프하여 전환할 때 사용하며, viewportFraction으로 페이지 크기 비율을 설정할 수 있습니다.