Flutter - #5. GridView

1. GridView 위젯은 그리드 형식으로 자식 위젯을 배치하는 데 사용되며, 각각의 자식 위젯은 정확한 크기 및 위치에 배치됩니다. GridView는 주로 이미지 갤러리, 상품 목록 등과 같이 그리드 레이아웃이 필요한 경우에 활용됩니다.

2. 주요 속성과 예시 코드

1) gridDelegate: GridView의 그리드 레이아웃을 제어하는 데 사용되는 속성입니다. 주로 SliverGridDelegateWithFixedCrossAxisCount나 SliverGridDelegateWithMaxCrossAxisExtent와 같은 클래스를 사용하여 설정합니다.

• SliverGridDelegateWithFixedCrossAxisCount: 각 행 또는 열에 고정된 개수의 아이템을 가지는 그리드를 생성합니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // 2개의 열을 가진 그리드
    mainAxisSpacing: 16.0, // 주 축(세로) 간격
    crossAxisSpacing: 16.0, // 교차 축(가로) 간격
  ),
  itemCount: 10, // 아이템 개수
  itemBuilder: (BuildContext context, int index) {
    return YourGridItemWidget(index: index);
  },
)

• SliverGridDelegateWithMaxCrossAxisExtent: 각 열 또는 행의 최대 너비를 지정하여 그리드를 생성합니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 200.0, // 열의 최대 너비
    mainAxisSpacing: 16.0, // 주 축(세로) 간격
    crossAxisSpacing: 16.0, // 교차 축(가로) 간격
  ),
  itemCount: 10, // 아이템 개수
  itemBuilder: (BuildContext context, int index) {
    return YourGridItemWidget(index: index);
  },
)

2)
itemCount: 그리드에 포함될 자식 위젯의 총 개수를 나타냅니다. itemBuilder 함수가 호출될 횟수를 지정합니다.

3) itemBuilder: 각 자식 위젯을 빌드하는 콜백 함수로, BuildContext와 int 인덱스를 인수로 받습니다. 이 함수에서 그리드 아이템 위젯을 반환해야 합니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: 10,
  itemBuilder: (BuildContext context, int index) {
    return YourGridItemWidget(index: index);
  },
)

4) scrollDirection: 그리드 아이템을 스크롤하는 방향을 설정합니다. 기본값은 Axis.vertical로 세로 스크롤입니다. Axis.horizontal로 설정하면 가로 스크롤이 됩니다.

GridView.builder(
  scrollDirection: Axis.horizontal, // 가로 스크롤
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: 10,
  itemBuilder: (BuildContext context, int index) {
    return YourGridItemWidget(index: index);
  },
)

5)Example

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

  @override
  Widget build(BuildContext context) {
    List<String> ImgUrlList = [
      "assets/images/이미지경로1.jpg",
      "assets/images/이미지경로2.jpg",
      "assets/images/이미지경로3.jpg",

    ];
         return GridView.builder(
            shrinkWrap: true, 
            //GridView 위젯은 기본적으로 사용 가능한 모든 공간을
            //차지하려고 하기 때문에 크기를 자동으로 계산하지 못함
            //shrinkWrap: 그리드뷰 크기를 하위컨텐츠에 맞게 설정
            itemCount: ImgUrlList.length,
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //행으로 칸 생성
              crossAxisCount: 3, //열 개수
            ),
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Image.asset("${ImgUrlList[index]}"),
              );
            },
          )

3. GridView 위젯은 다양한 방식으로 사용할 수 있으며, 그리드 레이아웃의 설정에 따라 다양한 디자인을 구현할 수 있습니다. 위의 예시 코드를 참고하여 원하는 그리드를 생성해보세요.