Flutter for SwiftUI Devs - Displaying a grid

 Displaying a grid 

SwiftUI에서 non-conditional grids를 만들 때,

GridRow와 함께 Grid를 사용한다.

Grid {
  GridRow {
    Text("Row 1")
    Image(systemName: "square.and.arrow.down")
    Image(systemName: "square.and.arrow.up")
  }
  GridRow {
    Text("Row 2")
    Image(systemName: "square.and.arrow.down")
    Image(systemName: "square.and.arrow.up")
  }
}

 

Flutter에서 grids를 표시하려면, GridView widget을 사용한다.

GridView는 다양한 constructors를 가지고 있는데,

각각은 비슷한 용도로 쓰이지만, 다른 input parameters를 사용한다.

아래 코드에서는 .builder() initializer를 사용했다.

const widgets = [
  Text('Row 1'),
  Icon(CupertinoIcons.arrow_down_square),
  Icon(CupertinoIcons.arrow_up_square),
  Text('Row 2'),
  Icon(CupertinoIcons.arrow_down_square),
  Icon(CupertinoIcons.arrow_up_square),
];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisExtent: 40.0,
        ),
        itemCount: widgets.length,
        itemBuilder: (context, index) => widgets[index],
      ),
    );
  }
}

 

SliverGridDelegateWithFixedCrossAxisCount delegate는

grid의 components를 lay out 하기 위해 쓰이는 다양한 parameters를 결정한다.

crossAxisCount는 한 행에 표시할 item의 수이다.

 

SwiftUI의 Grid는 GridRow가 필요하지만,

Flutter의 GridView는 components를 어떻게 구성할지 결정하기 위해 delegate를 사용한다.

 

 

---

 

Flutter for SwiftUI Developers