首页 > 解决方案 > 在 Flutter 中使用 StaggeredGridView 时,有没有办法优化布局以最小化空白?

问题描述

如何最小化网格中的空白?

在我的示例网格中,我有三个瓦片,但正如您所见,在 0 号瓦片旁边有很多空白。这个空间可以用 2 号瓦片填充以减少总空白。

我怎样才能做到这一点?

文本

  @override
  Widget build(BuildContext context) {
    return new StaggeredGridView.countBuilder(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: 2,
      itemCount: payback.keys.length,
      itemBuilder: (BuildContext context, int index) {
        if (index.isEven) {
          return Container(color: Colors.green, width: 100, height: 100, child: Center(child:Text(index.toString(), textScaleFactor: 4, style: TextStyle(color: Colors.white),)));
        } else {
          return Container(color: Colors.green, width: 200, height: 200, child: Center(child:Text(index.toString(), textScaleFactor: 4, style: TextStyle(color: Colors.white),)));
        }
      },
      staggeredTileBuilder: (int index) {
        if (index.isEven) {
          return StaggeredTile.fit(1);
        } else {
          return StaggeredTile.fit(2);
        }
      },
      mainAxisSpacing: 4.0,
      crossAxisSpacing: 4.0,
    );

标签: flutterlayoutstaggered-gridview

解决方案


推荐阅读