flutter - 如何在 Flutter 中创建 GridView 布局

Question

我正在尝试在 flutter 中布局一个 4x4 的瓷砖网格。我设法用列和行来做到这一点。但现在我找到了 GridView 组件。谁能提供一个如何使用它的例子？

我无法真正理解文档。我似乎没有得到我想要的结果。

Answer 1

使用适合您需要的。

1. GridView.count(...)

   GridView.count(
     crossAxisCount: 2,
     children: <Widget>[
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
     ],
   )
   

2. GridView.builder(...)

   GridView.builder(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     itemBuilder: (_, index) => FlutterLogo(),
     itemCount: 4,
   )
   

3. GridView(...)

   GridView(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     children: <Widget>[
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
     ],
   )
   

4. GridView.custom(...)

   GridView.custom(
     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
     childrenDelegate: SliverChildListDelegate(
       [
         FlutterLogo(),
         FlutterLogo(),
         FlutterLogo(),
         FlutterLogo(),
       ],
     ),
   )
   

5. GridView.extent(...)

   GridView.extent(
     maxCrossAxisExtent: 400,
     children: <Widget>[
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
       FlutterLogo(),
     ],
   )
   

输出(所有人都一样):