Flutter 基于网格系统的颤振布局

是否可以使用网格系统进行颤振布局。有类似的东西可能会很好

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

我想至少有一种说法，小部件的宽度应该是N列，从

I

column开始

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

GridRow(
排水沟：16，
专栏作家：4，
儿童：[
GridColumn（子项：SomeWidget，宽度：3，开始：2），
],
)

已经有一个软件包可以满足您的所有需求，它就是

这不完全是您描述的语法，但功能应该更强大或相同。可以通过设置

mainAxisSpacing

和

crossAxisSpacing

来添加檐槽，使用

crossAxisCount

设置列（或行，取决于方向）计数

要指定子项所使用的空间，请定义一个

staggeedtiles

列表，其中每个

staggeedtile

表示同一索引的子项

它与引导网格不完全相同，但它非常接近

---

我总结了一个超薄型的例子：

导入“包装：颤振/材料.省道”；
导入“包：颤振交错网格视图/颤振交错网格视图.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
正文：StaggedGridView.count(
主轴间距：8.0，
交叉轴间距：8.0，
交叉轴计数：12，
交错文件：[
交错文件计数（6，6），
交错文件计数（4，1），
交错文件计数（2，2），
交错文件计数（2，2），
],
儿童：[
容器(
颜色：颜色，红色，
子：文本（'6,6'）
),
容器(
颜色：颜色。绿色，
子项：文本（'4,1'）
),
容器(
颜色：颜色，蓝色，
子：文本（'2,2'）
),
容器(
颜色：颜色，黄色，
子：文本（'2,2'）
),
],
),
),
);
}
}

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

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')
            ),
          ],
        ),
      ),
    );
  }
}