SliverAppBar 的 Flutter 垂直 PageView 问题

Question

我需要有垂直PageView的滑动效果和SliverAppBar的效果。

如果我设置 PageView.builder 的 scrollDirection: Axis.vertical 并垂直滑动，当我向后滑动时，我无法获得 SliverAppBar。

设置 scrollDirection: Axis.horizo​​ntal SliverAppBar 可以工作，但如前所述，我需要它垂直。

我还没有找到任何好的方法来解决这个问题，你能帮我理解一下吗？ 我的最终目标是拥有第一个带有按钮的“屏幕”（这就是我使用 SliverAppBar 的原因），下一个屏幕将是全屏图片库。如果您有更好的不使用 Slivers 或 PageView 的解决方案，请告诉我。

     @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: MediaQuery.of(context).size.height*0.85,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  'https://source.unsplash.com/random?monochromatic+dark',
                  fit: BoxFit.cover,
                ),
                title: Padding(
                  padding: const EdgeInsets.only(left: 10.0),
                  child: Row(
                    children: [
                      ElevatedButton(
                          onPressed: () => print('btn1'),
                          child: Text('Button 1')),
                      ElevatedButton(
                          onPressed: () => print('btn2'),
                          child: Text('Button 2')),
                    ],
                  ),
                ),
              ),
            ),
          ];
        },
        body: _pageView(),
      ),
    );
  }

  _pageView() {
    return PageView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: 20,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Container(
            padding: EdgeInsets.all(16.0),
            child: Image.network(
              'https://source.unsplash.com/random?sig=$index',
              fit: BoxFit.cover,
            ),
          ),
        );
      },
    );
  }
}

如果您想查看完整示例或在您身边进行测试： https://pastebin.com/PXDHVw6k

Answer 1

1. 在SliverAppBar之前添加SliverOverlapAbsorber；

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

1. 使用custom scroll wheel 并使用sliver.list 代替pageview 并将physics: PageScrollPhysics() 添加到custom scroll wheel 以获得与页面浏览量相同的页面snapping effect。

CustomScrollView(
              physics: PageScrollPhysics(),
              slivers: <Widget>[
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (context, index) {
                      return ... ;
                    },
                    childCount: ...,
                  ),
                ),
              ],
            ),