android - SliverAppBar 没有完全折叠短列表

Question

我将 Flutter 的 SliverAppBar 与 SliverList 结合使用。应用栏可以很好地处理长列表，滚动很多。但是，如果我有包含 8 个项目的中等大小列表，则应用栏只会部分折叠，直到列表用完项目为止。从逻辑上讲，滚动停止是有道理的，因为没有更多的项目，但它在应用程序栏上留下了非常令人讨厌的效果，应用程序栏被留在了折叠工具栏的过渡中间。

有没有办法强制列表向上滚动，直到工具栏完全折叠？

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton.extended(
        label: Text("Start!"),
        icon: Icon(Icons.play_arrow),
        backgroundColor: Colors.orange,
        elevation: 12,
        onPressed: () {
          Routing.navigate(
            context,
            LoggingPage(
              workout: _workout,
              exercises: workoutExercises,
            ),
          );
        },
      ),
      body: CustomScrollView( physics: ScrollPhysics(),
        slivers: <Widget>[
          SliverAppBar(
            actions: <Widget>[
              MaterialButton(onPressed: (){}, child: Text("data"),)
            ],
            expandedHeight: 300,
            pinned: true,
            floating: true,
            snap: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text(_workout.name),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              buildSliverListItem,
              childCount: workoutExercises.length,
            ),
          ),
        ],
      ),
    );
  }

Answer 1

我们可以根据 Andrea 的示例代码使用 NestedScrollView、SliverOverlapAbsorber 和 SliverOverlapInjector

https://github.com/bizz84/slivers_demo_flutter/blob/master/lib/pages/nested_scroll_view_page.dart .

我们使用 NestedScrollView。首先，我们将 SliverAppbar 嵌入 headerSliv​​erBuilder 中，并在 SliverAppBar 上方使用 SliverOverlapAbsorber。

接下来，我们将 CustomScrollView 嵌入到 NestedScrollView 主体内的构建器中。我们在主体顶部添加一个 SliverOverlapInjector。

return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
          return <Widget>[
            SliverOverlapAbsorber(
              handle:
              NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverAppBar(

                pinned: true,
                //floating: true,
                stretch: true,
                expandedHeight: 300.0,
                flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: const Text('Weather Report'),
                  background: Image.asset(
                    'assets/images/logo1.jpg',
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ];
        },
        body: SafeArea(
          child: Builder(
              builder:(BuildContext context) {
                return CustomScrollView(
                  slivers: <Widget>[
                    SliverOverlapInjector(
                      // This is the flip side of the SliverOverlapAbsorber above.
                      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                          context),
                    ),
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                          (BuildContext context, int i){
                            return ListTile(
                              leading: Icon(Icons.wb_sunny),
                              title: i%2 != 1 ? Text('Sunday ${i+1}') : Text('Monday ${i+1}'),
                              subtitle: Text('sunny, h: 80, l: 65'),
                            );
                          },
                        childCount: 5
                      ),
                    ),

                  ],
                );
              }
          ),
        ),
      ),
    );