交错网格视图无法在2列中显示数据

如何解决交错网格视图无法在2列中显示数据

我是Dart的新手，所以如果这个问题似乎微不足道或不需要，我深表歉意！

我想为只有2列的Feed实现Pinterest样式的网格布局。我正在使用staggered_grid_layout，并尝试实现来自stackoverflow问题的答案。到目前为止，这是我的代码：

home.dart

SizedBox(
            height: 535,width: 180,child: new StaggeredGridView.countBuilder(
              crossAxisCount: 2,itemCount: 10,itemBuilder: (BuildContext context,int index) => Card(
                child: Column(
                  children: <Widget>[
                    Image.network(storiesList[index]),Text("Some text"),],),staggeredTileBuilder: (int index) =>
              new StaggeredTile.fit(2),mainAxisspacing: 4.0,crossAxisspacing: 4.0,)

link to full code

注意：：我添加了SizedBox()是因为遇到了Vertical viewport was given unbounded height错误，如果还不行，请推荐一个替代方法

谢谢！

编辑：现在的外观

编辑：外观如何

解决方法

感谢更新，请查看下面的代码，无需StaggeredGridView，而是使用GridTile，

GridView.count(
          physics: const NeverScrollableScrollPhysics(),scrollDirection: Axis.vertical,shrinkWrap: true,crossAxisCount: 2,childAspectRatio: 1.0,padding: const EdgeInsets.all(4.0),mainAxisSpacing: 4.0,crossAxisSpacing: 4.0,children: new List<Widget>.generate(3,(index) {
            return new GridTile(
              child: InkResponse(
                child: new Card(
                // color:Colors.white,child: new Center(
                  child: new Text('XYZ'),),enableFeedback: true,onTap: () => _onSelected(index,items[index].toString().substring(0,10)),// Whatever you want on tap
                ),);
          }),

CrossAxisCount 是您想要划分网格的“瓷砖”数量。 StaggeredTile.fit(x) 是您要用于 item[index] 的图块数。所以，如果 CrossAxisCount 是 2，如果你想要 2 列，StaggeredTile 应该是 fit(1)。你甚至可以说 CrossAxisCount 是 8 和 StaggeredTile.fit(4) 代表 2 列，StaggeredTile.fit(2) 代表 4 列......等等。通过这种方式，您可以根据为 StaggeredTile.fit 设置的任何条件更改每行的列数。