SliverGrid 没有显示在 Flutter 的 CustomScrollView 中答案

【问题标题】：SliverGrid not showing inside CustomScrollView in FlutterSliverGrid 没有显示在 Flutter 的 CustomScrollView 中
【发布时间】：2021-11-13 13:56:16
【问题描述】：

我想从 REST api 获取数据，使用未来的 SliverGrid 应该构建。但它没有显示，只显示白色，而且我不知道如何在 SliverGrid 中指定总网格项目数。因此，如果它显示它必须生成超过实际计数。


SliverGrid(
              gridDelegate:
                  SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index)
                {
                  return FutureBuilder(
                    future: _items,
                    builder: (context, snapshot) {
                      return snapshot.connectionState == ConnectionState.done
                          ? snapshot.hasData
                              ? GridItem()
                              : Text('Retry')
                          : Text('progress');
                    },

                  );

                },

              ),)

【问题讨论】：

我希望通过 GridItem(snapshot.data) 传递数据以获取更新的项目。
没关系。但是由于我没有指定 totalItem 长度，所以长条网格会生成大量 GridItem。我不知道在哪里指定。我的意思是，snapshot.data.length
您可以在SliverChildBuilderDelegate 中找到childCount:。我更喜欢使用 FutureBuilder 作为 GridView 的父级。
好的。 customcrollview 不支持gridview。难道我错了。
我们可以用SliverGrid或warping和SliverToBoxAdapter，我做个demo分享给大家。

标签： flutter flutter-futurebuilder sliver-grid

【解决方案1】：

演示片段

未来

  Future<List<int>> _f() async {
     return await Future.delayed(Duration(seconds: 3))
        .then((value) => [1, 3, 5, 56, 65]);
  }

并在CustomScrollView内部使用

        FutureBuilder<List<int>>(
            future: _f(),
            builder: (context, snapshot) => !snapshot.hasData //handle more situation here  
                ? SliverToBoxAdapter(child: Text("loading"))
                : SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                    ),
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return Text(snapshot.data![index].toString());
                      },
                      childCount: snapshot.data!.length,
                    ),
                  ),
          ),

完整小部件


class HomeScreen extends StatefulWidget {
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Future<List<int>> _f() async {
    return await Future.delayed(Duration(seconds: 3))
        .then((value) => [1, 3, 5, 56, 65]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [ 
          FutureBuilder<List<int>>(
            future: _f(),
            builder: (context, snapshot) => !snapshot.hasData
                ? SliverToBoxAdapter(child: Text("loading"))
                : SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 2,
                    ),
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return Text(snapshot.data![index].toString());
                      },
                      childCount: snapshot.data!.length,
                    ),
                  ),
          ),
        ],
      ),
    );
  }
}

它解决了你的问题吗？

【讨论】：