如何在 Flutter 应用程序中创建响应式网格？

Question

使 Flutter 应用程序响应的最佳实践是什么？下面的代码是一个带有硬编码值的StraggeredGridView。

我应该编写一个根据屏幕大小计算值的方法，还是有其他方法可以这样做？

谢谢你的帮助！

  StaggeredGridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 20,
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 20),
    //shrinkWrap: true,
    children: <Widget>[
      _buildTile(
          Padding(
              padding: const EdgeInsets.all(20.0),
            child: Column(children: <Widget>[
              Material(
                  color: Color.fromRGBO(123, 228, 193, 0.5),
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Image.asset(
                      'assets/siren.png',
                      height: 40,
                    ),
                  )),
              Padding(padding: EdgeInsets.only(bottom: 10.0)),
              Text('NOTRUF', style: tileFontStyle),
            ]),
          ),),

Answer 1

您可以使其响应式，就像在 CSS 中一样。

使用数学！但如何呢？

使用 MediaQuery width 来玩转 crossAxisCount 属性：

crossAxisCount:(MediaQuery.of(context).size.width ~/ 250).toInt()

额外有用的提示：

如果您需要控制最小/最大计数，您可以导入数学库并使用最小/最大函数。

例子：

import 'dart:math';


/// Inside widget build insert following variables

final currentCount = (MediaQuery.of(context).size.width ~/ 250).toInt();

final minCount = 4;

...

// Automatically select whichever is greater

crossAxisCount: max(currentCount, minCount);


// Automatically select whichever is less

crossAxisCount: min(currentCount, minCount);

Answer 2

使用responsive_grid包

它的工作原理类似于 Bootstrap 网格系统

Answer 3

layoutBuilder正如 @Abbas.M 提到的，你也可以使用mediaQuery

    var deviceData = MediaQuery.of(context); 
    var screenSize = MediaQuery.of(context).size;
    var deviceOrientation = MediaQuery.of(context).orientation;

    if (screenSize.width > oneColumnLayout) {
      ...
    } else {
      ...
    }

例如设备数据、屏幕尺寸或方向，还有动画和其他真正有帮助的东西。