[Flutter] GridView 위젯

 

 

GridView

 

플러터의 GridView는 열 수를 지정하여 자식 위젯을 그리드 형태로 표시하는 위젯이다.

 

 

동일한 크기의 표를 그리는 것과 유사한데, 열 수만 지정해주면 해당 수만큼 위젯의 공간을 나누어 각 하나의 공간을 하나의 자식에 부여하는 것이다. 세로가 행, 가로가 열이므로 가로 기준에 맞춰 배치한다고 생각하면 된다.

 

 

 

 

코드는 아래와 같이 작성하여 사용한다.

 

GridView.count() 생성자를 사용하여 위젯을 그리고 있으며, crossAxisCount 프로퍼티를 사용하여 열 수를 지정한다.

GridView.count(
	crossAxisCount : 3,		// 이 부분에 열 수 지정
    	children: <Widget>[
        	//자식 위젯 코드 생략
        ]
)

 

 

 

이때 주의해야할 점은 일정한 공간을 열 수에 맞춰 동일한 비율의 크기로 자르기 때문에, 자식의 크기는 무시된다는 점이다.

동일한 크기의 GridView 위젯을 각각 3열과 4열로 설정한다면, 자식에게 부여되는 공간의 크기는 각각 아래 그림과 같아지는 것이다.

 

 

 

실제로 코드를 동작시켜 보았을 때도 같은 결과가 나타나는 것을 알 수 있다.

(자식 객체는 모두 width와 height가 각각 100으로 설정되어 있다.)

GridView.count(
        crossAxisCount : 4,
            children: <Widget>[
              Container(
                color: Colors.red,
                width: 100,
                height: 100,
                margin: const EdgeInsets.all(8.0)
              ),
              Container(
                  color: Colors.yellow,
                  width: 100,
                  height: 100,
                  margin: const EdgeInsets.all(8.0)
              ),
              Container(
                color: Colors.green,
                width: 100,
                height: 100,
                  margin: const EdgeInsets.all(8.0)
              ),
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                  margin: const EdgeInsets.all(8.0)
              )
            ]
)

 

 

[실행 결과]

 

 

 

 

위에서 crossAxisCount를 3으로 설정한 왼쪽의 실행 결과는 차례대로 3개의 자식이 배치된 뒤 하나는 자리가 밀려 두번 째 줄에 배치되었지만, 

crossAxisCount를 4로 설정한 오른쪽의 실행 결과는 차례대로 4개의 자식이 배치되었으며, 왼쪽에 비해 자식 객체의 크기가 작아진 것을 알 수 있다.

 

 

---

 

 

추가적으로, 따로 지정해주지 않은 gridView의 디폴트 사이즈는 전체 화면이다. 따라서 만약 GridView의 사이즈를 따로 지정하지 않고 crossAxisCount를 설정한다면, 전체 화면을 기준으로 구역이 나누어진다.

 

GridView의 배경을 회색으로 지정하고 실행시켜보면 다음과 같이 전체 영역을 차지 하고 있는 것을 확인 할 수 있다.

 

(crossAxisCount는 3으로 설정되어 있다.)

 

 

[실행 결과]

 

 

 

 

하지만 만약 GridView의 사이즈를 지정하면, 구역 역시 작아진다. 열을 나누는 기준은 gridView의 크기이기 때문이다.

GridView의 크기를 300*300으로 지정한 뒤 실행시켜보면 다음과 같이 변화한다.

 

(마찬가지로 crossAxisCount는 3으로 설정되어 있다.)

 

 

 

[실행 결과]

 

 

회색 영역으로 표현되고 있는 GridView의 크기가 작아진 것이 보이며, 자식 객체들 역시 줄어든 것을 확인 할 수 있다.

 

 

GridView의 사이즈를 150*150으로 변경하면 아까보다 더 작아진 것을 볼 수 있고, 자식 객체들 역시 사이즈가 같이 줄어들었다. 

 

모든 실행 결과에서 자식 객체들의 사이즈는 각각 100*100으로 설정되어 있었지만, 무시 되는 것 역시 확인 할 수 있다.

 

 

 

[실행결과]