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

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

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

最佳答案

使用适合您需要的。

  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(),
      ],
    )
    

输出(所有人都一样):

https://stackoverflow.com/questions/44183795/

相关文章:

flutter - 如何从 Flutter 应用程序调用电话

dart - 是否可以将 Flutter 应用注册为 Android Intent 过滤器并处理传入

dart - 带有快速拨号的 flutter float Action 按钮

dart - 如何检测 Flutter 中布局的方向变化?

dart - 如何为 qa/dev/prod 构建不同版本的 Flutter 应用程序?

android - 使用 Flutter 的 Android Studio 中不显示设备列表

flutter - 如何在 ListView 中添加滚动指示器

flutter - 在 iphone 上安装使用 android studio 开发的 Flutte

google-maps - 如何在 Flutter 中更改谷歌地图标记的图标大小?

dart - 如何将数据从子小部件传递到其父小部件