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

bkhjykvo  于 2023-06-24  发布在  Flutter
关注(0)|答案(5)|浏览(123)

什么是最佳实践使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),
            ]),
          ),),
0h4hbjxa

0h4hbjxa1#

你可以让它像在CSS中一样响应。
用数学!但怎么做呢
使用MediaQuery width来使用crossAxisCount属性:

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

额外有用提示:

如果您需要控制Min / Max计数,您可以导入数学库并使用min / max函数。
示例:

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);
nnsrf1az

nnsrf1az2#

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

js4nwp54

js4nwp543#

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

比如设备数据,屏幕大小,或方向,还有动画和其他东西,这真的很有帮助。

kx1ctssn

kx1ctssn4#

我最近一直在做的是,当应用程序启动时,我获取它的尺寸,并将它们存储为常量,我在应用程序中使用。看看this,因为我发现它很有帮助。
您还可以使用一些小部件来自行缩放,如layoutBuilder,在here上有更多

9rbhqvlz

9rbhqvlz5#

在crossAxisCount上使用MediaQuery.of(context).orientation == Orientation.landscape。然后使用三元运算符或if/else语句来声明crossAxisCount值。参见下面的示例。对我很有效

crossAxisCount: (MediaQuery.of(context).orientation == Orientation.landscape) ? 4 : 2

相关问题