如何使用颤振实现与这张照片完全相同的可滚动网格视图答案

【问题标题】：How to achieve scrollable grid view exactly like in this photo using flutter如何使用颤振实现与这张照片完全相同的可滚动网格视图
【发布时间】：2021-12-14 03:17:17
【问题描述】：

Staggered Grid View 可以实现大小和一切，但它总是从顶部开始放置项目，就在应用栏下方。如何实现添加该文本（例如找到 10 个项目）然后开始在网格视图中显示项目？

【问题讨论】：

标签： flutter gridview flutter-layout staggered-gridview

【解决方案1】：

如果你看一下图片的GridView，你会发现一个图案。

开启itemCount: 传递itemLength+1。这个额外的1 将有助于插入Text。

要构建这个 GridView，请使用 StaggeredGridView.countBuilder

 StaggeredGridView.countBuilder(
        crossAxisCount: 2,
        shrinkWrap: true,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10,
        itemCount: 10,
        itemBuilder: (context, index) {
          return index == 0
              ? Center(child: Text("Item s "))
              : Container(
                  color: index.isEven ? Colors.amber : Colors.deepPurple,
                  alignment: Alignment.center,
                  child: Text("$index s"),
                );
        },
        staggeredTileBuilder: (index) {
          return index == 0
              ? StaggeredTile.count(1, .3) //For Text
              : StaggeredTile.count(1, 1); // others item
        },
      ),

了解更多关于flutter_staggered_grid_view的信息。

图案绘制抱歉画的不好，希望你现在明白了。

【讨论】：

非常感谢！
请原谅我不够清楚并且没有更好地形成问题。这实际上是我关于 Stack Overflow 的第一个问题。 :) 如此明确的答案。昨晚我第一次体验了交错网格视图，我超级累了，我什至无法阅读文档。我在没有使用这个包的情况下构建了相同的屏幕，但是交错的网格视图更干净、更灵活。