flutter StaggeredGridView 按条件显示图块

Question

我在我的一个 Flutter 项目中使用 StaggeredGridView。根据数据可用性，我不想加载几个 tiles。

例如。我展示了 5 个图块，其中 3 个依赖于网络上可用的数据。有时可能需要 10 到 15 秒。现在，如果我 return 一个 Container() 直到我的数据被加载，那么它也会在布局中包含整个 space。

我只是不想在数据不可用或加载时间过长时将该图块添加到网格中。加载后应该会显示。

提前致谢

Answer 1

Widget build(BuildContext context) {
  return StreamBuilder<GridData>(
    stream: [Stream end point] // your stream url,
    builder: (context, snapshot) {
     if (!snapshot.hasData) return LoadingSpinner();
     return [View that you want to return]; // Your grid code.
   }
  )
}

示例代码

Answer 2

创建 StaggeredGridView 时，设置 staggeredTiles 属性并确保为要隐藏的图块传入 StaggeredTile.fit(1)。这样磁贴将包裹其内容，因此如果没有内容，它将被隐藏。

flutter StaggeredGridView 按条件显示图块

flutter StaggeredGridView show tiles on condition

flutter

flutter-layout

staggered-gridview