내가 보려고 쓰는 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';
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: GridViewWidget(),
);
}
}
class GridViewWidget extends StatelessWidget {
const GridViewWidget({Key? key}) : super(key: key);
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는 아이템을 여러 개 나열할 때 잘 사용할 수 있을 것 같다.
오늘의 일기는 여기까지!