Question

我是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错误，如果还不行，请推荐一个替代方法

谢谢！

编辑：现在的外观

编辑：外观如何

Answer 1

感谢更新，请查看下面的代码，无需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
                ),
              );
          }),
        ),

Answer 2

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

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

2 个答案: