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

Posted 2023-02-23

【中文标题】交错网格视图无法在 2 列中显示数据

【英文标题】：Staggered Grid View unable to show data in 2 columns

【发布时间】：2020-12-04 05:23:52

【问题描述】：

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

我想为我的提要实现 Pinterest 风格的网格布局，只有 2 列。我正在使用 staggered_grid_layout 并尝试从 *** 问题中实现答案。这是我到目前为止的代码：

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

谢谢！

编辑：现在的样子

编辑：应该是什么样子

【问题讨论】：

你的问题不清楚！你能告诉我们你到底想要什么。

更新了我的问题，请看。

【参考方案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
                ),
              );
          ),
        ),

【讨论】：

是的，但这会使它们保持固定的宽度和高度，但我希望一个项目的高度根据它托管的图像进行缩放

使用 MediaQuery 作为高度和宽度，这将根据您的屏幕高度和宽度增加和减少参见下面的代码 :: height: MediaQuery.of(context).size.height / 5

【参考方案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 放置的任何条件更改每行的列数。