flutter - Flutter - 在 FutureBuilder 和 SliverList 中使用 ListView.builder - 滚动行为

Question

我正在尝试改进我的应用程序，并希望用 SliverList 包装现有的 FutureBuilder。不幸的是，我有一种奇怪且难以理解的滚动行为。

到目前为止，这是我的代码：

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
            child: CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 300,
              floating: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Padding(
                  padding: EdgeInsets.fromLTRB(30, 10, 30, 10),
                  child: Text(
                      'some subtext here...',
                      style: TextStyle(
                          fontStyle: FontStyle.italic,
                          color: Colors.white,
                          fontSize: 12.0)),
                ),
                background: Stack(
                  fit: StackFit.expand,
                  children: [
                    Container(
                      child: Image.network(
                        'https://dummyimage.com/600x400/000/fff',
                        fit: BoxFit.cover,
                      ),
                    ),
                    const DecoratedBox(
                      decoration: BoxDecoration(
                        gradient: LinearGradient(
                          begin: Alignment(0.0, 0.5),
                          end: Alignment(0.0, 0.0),
                          colors: <Color>[
                            Color(0xcc000000),
                            Color(0x55000000),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SliverPadding(
                padding: EdgeInsets.only(top: 10),
                sliver: SliverList(
                  delegate: SliverChildListDelegate([
                      Container(
                        
                        child: FutureBuilder(
                          future: fetchData(),
                          builder: (BuildContext context, AsyncSnapshot snapshot) {
                            if (snapshot.data == null) {
                              return Text('loading...');
                            } else {
                              return ListView.builder(

                                scrollDirection: Axis.vertical,
                                shrinkWrap: true,

                                itemCount: snapshot.data.length,
                                itemBuilder: (BuildContext content, int index) {
                                  // return Text('Text ' + snapshot.data[index].name);
                                  return snapshot.hasData ? Card(
                                    elevation: 4,
                                    child: ListTile(
                                      leading: CircleAvatar(
                                        backgroundImage:
                                            NetworkImage(snapshot.data[index].image_url),
                                      ),
                                      trailing: Text('Test'),
                                      title: Text(snapshot.data[index].name),
                                      subtitle: Text(snapshot.data[index].latin_name, style: TextStyle(
                                        fontStyle: FontStyle.italic,
                                      )),
                                      onTap: () {
                                        /*Navigator.push(context,
                                          new MaterialPageRoute(builder: (context)=> DetailPage(snapshot.data[index]))
                                        );*/
                                        print('tapped');
                                      },
                                    ),
                                  ) : Text('no Data'); 
                                },
                              );

                              //return Text('loading complete');
                            }
                          }
                        ),
                      ),
                  ],),
                ),
            )
          ],
        )),
      ],
    ));
  }

SliverAppBar 可以正确显示，但不幸的是，自从添加了 Slivers 后，我的 FutureBuilder 根本没有显示任何内容。

添加scrollDirection并显示数据后shrinkWrap，ListView我无法正确滚动。

当在红色区域拖动它时，列表会在释放后立即恢复 SliverAppBar 也不会缩小。在绿色区域滚动时，Sliver Header 可以正常工作，并且在释放时滚动不会在顶部对齐。

以前有人遇到过这个问题吗？或者有人可以解释为什么会发生这种情况？

标签： flutterflutter-sliverflutter-futurebuilder