使用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，就像其他人所说的那样。我通过将所有内容包装在FutureBuilder中的SliverChildBuilderDelegate中来实现的。这是我的工作副本。

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');

                },
                ); 
            },
    ));
  }