Flutter中如何实现AppBar下方的页面上下滑动切页效果

效果不达标的核心原因 #

这套实现跑不出预期效果的本质是组件层级放反了，不是PageView本身不支持垂直方向分页：
如果直接把PageView塞在Scaffold默认的body插槽里，把AppBar、底部按钮放在Scaffold自带的appBar、bottomNavigationBar位置，整个屏幕会被Scaffold的结构硬分成三块独立区域：上下栏各自占死固定空间，中间的PageView只能在切出来的中间窄条里滑动，视觉上就成了“内容在一个固定框里滚”，完全没有需要的那种上下栏浮在内容上层、语录从上下栏底下滑过完成翻页的自然效果。

正确的布局实现逻辑 #

直接用Stack做全屏叠层布局，绕开Scaffold的原生分区结构：

• 最底层放全屏尺寸的垂直PageView：设置scrollDirection: Axis.vertical、pageSnapping: true，确保每次滑动是整页吸附的分页切换效果，不是无停顿的普通连续滚动。这个PageView占满整个手机屏幕，不提前给上下栏预留占位空间
• 在Stack的上层叠两个绝对定位的固定组件，全程不随PageView的滑动移动：
  • 顶部用Positioned组件贴屏幕边缘放置，承载带右上角操作按钮的自定义AppBar
  • 底部用Positioned组件贴屏幕底边放置，承载两个固定操作按钮
• 给每个PageView内的语录页面设置匹配的上下padding：顶部padding值等于自定义AppBar的实际高度，底部padding值等于底部按钮栏的实际高度，保证语录内容不会被上下的固定栏遮挡，内容刚好在两层固定栏之间的可视区域排布

常见踩坑修正 #

• 不要额外套GestureDetector手动监听垂直滑动来触发翻页，PageView本身已经处理好了垂直方向的分页手势，只要上层固定栏没有全尺寸的透明GestureDetector拦截滑动事件，上下栏空白区域的滑动操作会自然穿透到下层的PageView，实现流畅切页
• 不要给PageView外层套SingleChildScrollView，否则会把分页效果变成无边界的普通滚动，完全失去分页切换的顿挫感
• 如果想要更真实的叠层视觉效果，可以通过PageController监听页面滑动偏移量，给上下两层固定组件加轻微的透明度变化，让内容滑动靠近上下栏的时候有自然的层级过渡，完全不需要改动整体的布局结构

内容的提问来源于stack exchange，提问作者Bew Smith