使用网格系统的 Flutter 布局答案

【问题标题】：Flutter layout using grid system使用网格系统的 Flutter 布局
【发布时间】：2019-08-19 13:59:31
【问题描述】：

是否可以使用网格系统在 Flutter 中进行布局。拥有类似于Bootstrap grid system 的东西可能会很好。

我希望我的行包含 4 列，列之间有固定的空格（排水沟）。（无论屏幕宽度如何，排水沟都应具有相同的尺寸）。

而且我想至少有一种说法，小部件应该是 N 列宽度，从 i 列开始。

所以最终的 api 可以是这样的：

GridRow(
  gutter: 16,
  columnsCount: 4,
  children: [
    GridColumn(child:SomeWidget, width:3, begin:2),
  ],
)

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

已经有一个包可以满足你的所有需求，那就是StaggeredGridView。

这与您描述的语法不完全一样，但功能应该更大或相同。您可以通过设置mainAxisSpacing 和crossAxisSpacing 添加装订线，使用crossAxisCount 设置列（或行，取决于方向）计数。

要指定子级使用的空间，您定义一个staggeredTiles 列表，其中每个StaggeredTile 代表相同索引的子级。

它不完全与 Bootstrap 网格相同，但已经足够接近了。

我整理了一个超级苗条的例子：

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: StaggeredGridView.count(
          mainAxisSpacing: 8.0,
          crossAxisSpacing: 8.0, 
          crossAxisCount: 12,
          staggeredTiles: [
            StaggeredTile.count(6, 6),
            StaggeredTile.count(4, 1),
            StaggeredTile.count(2, 2),
            StaggeredTile.count(2, 2),
          ],
          children: <Widget>[
            Container(
                color: Colors.red,
                child: Text('6,6')
            ),
            Container(
                color: Colors.green,
                child: Text('4,1')
            ),
            Container(
                color: Colors.blue,
                child: Text('2,2')
            ),
            Container(
                color: Colors.yellow,
                child: Text('2,2')
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：

唯一的问题是项目和位置是分开的。如果您需要添加一个新项目，您需要插入到两个列表中。但我可以使用它并使用更好的 api 创建小部件。
你可以像你说的那样简单地创建包装方法，希望这能解决你的问题:)