내가 보려고 쓰는 Flutter 일기
출처 : https://api.flutter.dev/flutter/widgets/GridView-class.html

GridView

오늘 배워볼 위젯은 GridView.
스크롤이 가능하고, 스크롤되는 방향을 따라 격자 모양으로 자식 요소들을 나열한다. 여러가지 생성자가 있는데, 여기서는 우선 GridView.count, GridView.extent 생성자를 알아보자.

가장 자주 사용되는 건 GridView.count라고 한다. 열 개수를 고정시켜 자식 요소를 나열한다. GridView.extent는 요소들의 열 너비를 조정하는 듯하다. 설명을 자세히는 못알아들었다;;

우선 공식 문서에서 제공하는 코드를 돌려보았다.

코드 예시로 알아보자

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp();

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: GridViewWidget(),
    );
  }
}

class GridViewWidget extends StatelessWidget {
  const GridViewWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:const Text("Test GridView")),
      body: GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        crossAxisCount: 3,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("Child 1", style: TextStyle(fontSize: 20),),
            color: Colors.teal[100],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("Child 2", style: TextStyle(fontSize: 20),),
            color: Colors.teal[200],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("Child 3", style: TextStyle(fontSize: 20),),
            color: Colors.teal[300],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("Child 4", style: TextStyle(fontSize: 20),),
            color: Colors.teal[400],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("Child 5", style: TextStyle(fontSize: 20),),
            color: Colors.teal[500],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("Child 6", style: TextStyle(fontSize: 20),),
            color: Colors.teal[600],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: const Text("Child 7", style: TextStyle(fontSize: 20),),
            color: Colors.teal[700],
          ),
        ],
      )
    );
  }
}

눈여겨 볼 부분은 crossAxisCount 이다. 이 속성을 1로 설정하면 ListView와 같은 목록 형태로 보여지게 된다. 2 이상의 값을 설정하면, 열의 개수가 변한다. 아래는 crossAxisCount 설정을 2, 3으로 했을 경우의 화면이다.

crossAxisCount :2	crossAxisCount : 3

다음으로는 GridView.extent를 알아보자. 위 코드에서 GridView.count -> GridView.extent로 변경하고, crossAxisCount 속성을 없애고 maxCrossAxisExtent 속성을 넣어주었다.

body: GridView.extent(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        maxCrossAxisExtent: 100,

maxCrossAxisExtent : 50	maxCrossAxisExtent : 100	maxCrossAxisExtent : 200

뭔진 정확하게 모르겠는데, 숫자를 키울수록 자식요소 너비가 늘어났다.

GridView는 아이템을 여러 개 나열할 때 잘 사용할 수 있을 것 같다.

오늘의 일기는 여기까지!