Flutter - 网格布局中的动态列数答案

【问题标题】：Flutter - Dynamic Column Count in Grid LayoutFlutter - 网格布局中的动态列数
【发布时间】：2018-11-30 11:04:16
【问题描述】：

我是 Flutter 的新手。就像我们可以覆盖 Android 中网格布局的列数一样。我想用 Flutter 实现同样的目标。

就像我的一些网格布局项目应该在一行中有一列，而对于某些行，我需要不止一列。任何想法如何实现这一点都会很棒。

【问题讨论】：

@Developine 你解决了吗？

标签： flutter grid-layout flutter-layout

【解决方案1】：

好吧，我没有网格，但我的要求与我确实需要构建的 N*M 布局的要求相似

请参考this 我试图建立一个二维矩阵来显示我能够为每一行和每一列使用嵌套的for循环此外，每行中的列数是有限的（尽管每行有所不同）并且事先已知

代码片段：

Widget _buildBody() {
    List<Widget> rows = new List<Widget>(gameBoard.length);
    for (int i=0;i<gameBoard.length; i++){
      List<Widget> cols = new List<Widget>(gameBoard[i].length);
      for(int j=0; j<gameBoard[i].length; j++){
        cols[j] = gameBoard[i][j].column;
      }
      rows[i] = new Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: cols,
      );
    }

    return new Container(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: rows,
      ),
    );
}

希望对你有帮助

【讨论】：

【解决方案2】：

您可以为具有最大列数的行创建网格，然后添加空容器：

Container()

在你不想丢失列的地方：

GridView.count(
    shrinkWrap: true,
    crossAxisCount: 3,
    children: <Widget>[
      Container(
          // dummy widget to fill [1, 1]
      ),
      Container(
        color: Colors.red,
      ),
      Container(
        color: Colors.blue,
      ),

      Container(
        color: Colors.red,
      ),
      Container(
          // dummy widget to fill [2, 2]
      ),
      Container(
        color: Colors.blue,
      ),

      Container(
        color: Colors.red,
      ),
      Container(
        color: Colors.blue,
      ),
      Container(
          // dummy widget to fill [3, 3]
      ),

结果：

=======

【讨论】：

有效但价格昂贵