[Flutter] GridView 위젯

GridView 위젯

• 리스트 뷰와 마찬가지로 항목을 나열하는 위젯이지만, 리스트 뷰와 달리 한 줄에 여러 개를 함께 나열할 수 있음 (그리드 형태)
• 리스트 뷰와 마찬가지로 그리드뷰도 GridView.builder() 생성자를 제공하며,
  • itemCount, itemBuilder 속성을 통해 항목의 개수와 위젯을 지정
  • gridDelegate 속성을 설정해야 함
    • 이 속성에는 SliverGridDelegateWithFixedCrossAxisCount 객체를 지정해줘야 함
    • 해당 객체에서 crossAxisCount 값이 한 줄에 함께 나와야 하는 항목의 개수임
    • 그리드 두 방향을 설정하지 않으면, crossAxisCount는 가로를 가리킴
• 참고: scrollDirection 속성에 Axis.horizontal을 설정하면, crossAxisCount는 세로 방향을 가리킴

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // build가 페인팅 처리함 -> 화면에 그려 줌
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('그리드뷰 위젯 연습'),),
        // 동적인 화면 빌드 -> builder
        body: GridView.builder(
            // 위젯 레이아웃
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2, // 2개의 열
              crossAxisSpacing: 16, // 가로 방향으로 16만큼 공백
              mainAxisSpacing: 20 // 세로 방향으로 20만큼 공백
            ),
            itemCount: 10,
            itemBuilder: (context, index) {
              return Container(
                color: Colors.blueGrey,
                child: Center(child: Text('index number : $index')),
              );
            }
        ),
      ),
    );
  }
}

// build가 페인팅 처리함 -> 화면에 그려 줌

body: GridView.builder(
    // 위젯 레이아웃
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 2, // 2개의 열
      crossAxisSpacing: 16, // 가로 방향으로 16만큼 공백
      mainAxisSpacing: 20 // 세로 방향으로 20만큼 공백
    ),

실행 화면______