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

最近我一直在做的事情是，我在启动应用程序时获取了它的尺寸并将其存储为在整个应用程序中使用的常量。请查看this，因为我发现它非常有帮助。

您还可以使用一些小部件来自行缩放，例如在here上layoutBuilder

Answer 2

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 {
      ...
    }

像设备数据，屏幕尺寸或方向，还有动画和其他东西，这确实有帮助。

Answer 3

使用responsive_grid软件包

它的工作方式类似于Bootstrap网格系统

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

3 个答案: