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

Question

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

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

Answer 1

好吧，我没有网格，但是我的要求与应该构建N * M布局的要求相似

请参考this，我试图在其中建立2D矩阵进行显示 我能够实现对每一行和每一列使用嵌套的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,
      ),
    );
}

希望它对您有帮助

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

结果：

=======