基于SliverAppBar的颤振垂直SliverAppBar问题

Question

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

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

设置scrollDirection: Axis.horizontal SliverAppBar工作，但正如前面提到的，我需要垂直设置。

我还没有找到任何好的方法来解决这个问题，你能帮我理解吗？我的最后一个目标是拥有第一个带有按钮的“屏幕”(这就是为什么我要使用SliverAppBar)，接下来的屏幕将是一个全屏幕图片库。如果你有一个更好的解决方案，不使用条子或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

SliverAppBar;之前的

1. 添加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。

G 216

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