如何使用 flutter 实现与这张照片完全一样的可滚动网格视图

Question

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

Answer 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 的更多信息。

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

如何使用 flutter 实现与这张照片完全一样的可滚动网格视图

How to achieve scrollable grid view exactly like in this photo using flutter

gridview

staggered-gridview

flutter

flutter-layout