Flutter GridView(그리드뷰)

`GridView`는 Flutter에서 2차원 격자형 레이아웃을 만드는 데 사용되는 위젯입니다. 수직 및 수평 스크롤이 가능하며, 일반적으로 많은 수의 항목을 보기 좋게 배치할 때 사용됩니다. `GridView`는 여러 생성자를 통해 다양한 방식으로 사용될 수 있습니다.

주요 생성자

1. GridView()
   – 기본 생성자입니다. 직접 아이템을 추가하여 그리드를 만듭니다.

2. GridView.builder()
   – 항목이 동적으로 생성되도록 설정할 수 있는 생성자입니다. 많은 데이터 항목을 효율적으로 렌더링할 때 사용합니다.

3. GridView.count()
   – 고정된 개수의 열을 가지는 그리드를 만들 때 사용합니다.

4. GridView.extent()
   – 각 항목의 최대 크기를 설정하여 그리드를 만들 때 사용합니다.

주요 속성

– children: `GridView`에 추가할 위젯 목록을 설정합니다.
– itemCount: `GridView.builder`에서 표시할 항목 수를 설정합니다.
– itemBuilder: `GridView.builder`에서 각 항목을 렌더링하는 방법을 설정합니다.
– gridDelegate: 그리드의 레이아웃 및 배치 규칙을 설정합니다. 일반적으로 `SliverGridDelegateWithFixedCrossAxisCount` 또는 `SliverGridDelegateWithMaxCrossAxisExtent`를 사용합니다.
– scrollDirection: 스크롤 방향을 설정합니다. 기본값은 수직 스크롤(`Axis.vertical`)입니다.
– shrinkWrap: `GridView`가 자신의 크기만큼만 차지하도록 설정합니다.
– physics: 스크롤 동작을 설정합니다. 예를 들어, `NeverScrollableScrollPhysics`를 사용하면 스크롤이 비활성화됩니다.

예제 코드

기본 GridView
기본 생성자를 사용하여 `GridView`를 만드는 간단한 예제입니다.

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 GridView Example'),
        ),
        body: GridView.count(
          crossAxisCount: 2, // 각 행에 두 개의 항목을 배치합니다.
          children: List.generate(20, (index) {
            return Center(
              child: Container(
                padding: EdgeInsets.all(8),
                color: Colors.blue,
                child: Text(
                  'Item $index',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}

GridView.builder
`GridView.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 GridView.builder Example'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 각 행에 세 개의 항목을 배치합니다.
          ),
          itemCount: 50,
          itemBuilder: (context, index) {
            return Center(
              child: Container(
                padding: EdgeInsets.all(8),
                color: Colors.green,
                child: Text(
                  'Item $index',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

GridView.extent

`GridView.extent`를 사용하여 각 항목의 최대 크기를 설정하는 예제입니다.

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 GridView.extent Example'),
        ),
        body: GridView.extent(
          maxCrossAxisExtent: 150, // 각 항목의 최대 크기를 설정합니다.
          children: List.generate(30, (index) {
            return Center(
              child: Container(
                padding: EdgeInsets.all(8),
                color: Colors.orange,
                child: Text(
                  'Item $index',
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
            );
          }),
        ),
      ),
    );
  }
}

코드 설명

– GridView.count:
  – `crossAxisCount`를 2로 설정하여 각 행에 두 개의 항목을 배치합니다.
  – `List.generate`를 사용하여 20개의 항목을 생성합니다.
  – 각 항목은 파란색 배경에 흰색 텍스트로 표시됩니다.

– GridView.builder:
  – `gridDelegate`로 `SliverGridDelegateWithFixedCrossAxisCount`를 사용하여 그리드 레이아웃을 설정합니다.
  – `crossAxisCount`를 3으로 설정하여 각 행에 세 개의 항목을 배치합니다.
  – `itemCount`를 50으로 설정하여 50개의 항목을 생성합니다.
  – `itemBuilder`를 사용하여 각 항목을 동적으로 생성합니다.
  – 각 항목은 녹색 배경에 흰색 텍스트로 표시됩니다.

– GridView.extent:
  – `maxCrossAxisExtent`를 150으로 설정하여 각 항목의 최대 크기를 설정합니다.
  – `List.generate`를 사용하여 30개의 항목을 생성합니다.
  – 각 항목은 주황색 배경에 흰색 텍스트로 표시됩니다.

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

Post Views: 481

Leave a Reply Cancel reply