플러터, flutter) Grid형제들 - Gridview, GridTile, GridTileBar

1) GridView

 - ListView와 사용법이 거의 똑같다.

 - ListView처럼, GridView와 GridView.Builder가있다.

 

<GridView.Builder>

 - 기본적으로 필요한 속성은 3가지이다. itemcount, itembuilder, gridDelegate

 - itemcount, itembuilder는 ListView와 같은 개념이다.

 - gridDelegate이 특이한 놈이다. gridView가 어떻게 생길지 결정해주는 놈이다.

 - 속성으로 2가지 위젯중 하나를 고르면 된다.

   1) SliverGridDelegateWithFixedCrossAxisCount

     > grid 기둥 개수를 미리 선정해서, 사이즈가 어떻든 그에 맞추는 방식

     > (컨텐츠들의 사이즈가 바뀜)

   2) SliverGridDelegateWithMaxCrossAxisExtent

     > grid의 가로 길이를 결정하고 난 뒤, 그에 맞게 기둥들이 들어가는 방식 

     > (컨텐츠들의 사이즈가 바뀌지 않음)

 

 

위 이미지를 보면, crossAxisCount 로 기둥의 개수를 결정하는 모습이 보이며,

childAspectRatio는 3/2 인데 이것은 가로 3, 새로 2의 비율을 의미한다.

나머지 2개는 컨텐츠간 간격을 의미한다.

 

<GridView>

나중에 채워넣을것이다

 

2) GridTile

 - 그리드 안에 넣을 수 있는 위젯이다.

 - 그리드 안에 꼭 이 위젯만 넣어야하는 것은 아니다.

 - 총 3개의 속성이 있다. child, header, footer,

 

> child는 메인 content를 넣어야 한다. 필수다.

> header는 grid 상단 부분을 차지한다. 여기에 text나 뒤에 소개할 GridTileBar위젯을 넣을 수 있다.

> footer는 grid의 하단 부분을 차지한다. 마찬가지로 여기에 text나 뒤에 소개할 GridTileBar위젯을 넣을 수 있다.

footer에 gridTilebar을 넣었는데, 보시다 시피 각 그리드의 하단 부분을 차지한다.

 

 

 

3) GridTileBar

 - GridTile에 넣을 수 있는 특수 위젯이다.

 - ListTile과 비슷하게, leading, trailing, title 등을 넣을 수 있다.

 - 위 그림에는 GridTileBar안, leading과 trailing에 아이콘버튼을 넣은 것이고, tiltle로 제품이름이 들어가 있다.