dart - 使用 API 获取的 Flutter SliverGrid 填充

Question

是否有任何使用提取填充的 SliverGrid 的工作示例？我找到的所有示例都包含静态/类型化内容。

我想要的是用从 API 提取的动态内容填充 SliverGrid。

编辑

这是我当前的结构，SliverToBoxAdapter 填充了一个水平滚动的 listView，下面是我从中复制的 SliverGrid，示例生成一个包含两列的无限滚动。

我尝试添加另一个带有垂直 ListView 的 SliverToBoxAdapter，但随后滚动停止工作并且需要定义高度。

我想知道我能否以与 ListView 相同的方式填充 SliverGrid 以及如何做到这一点，因为我找不到任何示例。

我不想看起来很懒惰，但我是 Flutter 的新手，不知道如何实现这一点。

return Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
                //SOME OPTIONS AND VALUES HERE
            ),
            SliverToBoxAdapter(
              // this is populated with a fetch
              //child: NiceWidgetHere(), 
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1.5,
              ),
              delegate: SliverChildBuilderDelegate(
                 // Don't know what to do here
                //(context, index) => AnotherNiceWidgetHere(),
              ),
            )
          ],
        )
    );

在下图中，您可以看到我的布局。水平 ListView 和垂直 GridView 都需要从 json API 获取内容，获取不是问题，因为已经在水平 ListView 中工作。

Answer 1

您已经按照其他人的说明使用了 FutureBuilder。我通过将 SliverChildBuilderDelegate 中的所有内容包装在 FutureBuilder 中来做到这一点。这是我的工作副本。

Widget build(BuildContext context) {   
    APIServiceProvider  api = APIServiceProvider();
    Future<List<AttributeModel>> attributesListFuture = api.getAttributes();

    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      delegate: SliverChildBuilderDelegate(
            (BuildContext context,int index)
            {
              return FutureBuilder(
                future: attributesListFuture ,
                builder: (context, snapshot)
                {

                      return snapshot.connectionState == ConnectionState.done? snapshot.hasData
                      ? HomeIconCell(snapshot.data[index])
                      :  Text('Retry')
                  : Text('progress');

                },
                ); 
            },
    ));
  }