Flutter如何实现支持垂直滚动的动态高度自适应PageView

以下是三种可行的实现方案，可根据你的项目复杂度选择：

方案1：修改现有ExpandablePageView源码适配垂直滚动 #

该方案改动量最小，可复用现有成熟的测量和动画逻辑：

• 把expandable_page_view包的核心源码拷贝到本地项目中，其核心逻辑是通过GlobalKey获取每个子组件的实际高度，监听PageController的滚动偏移，动态计算当前展示高度，滚动过程中做高度插值过渡
• 将源码中原先针对水平滚动的偏移计算逻辑，替换为垂直滚动适配逻辑：原逻辑读取PageController的水平偏移page值，修改为适配scrollDirection: Axis.vertical的参数读取，同时将所有宽度适配逻辑替换为高度适配
• 子组件高度测量部分和滚动方向无关，原有逻辑可直接保留，只需确保每个子项都绑定了测量用的GlobalKey即可

方案2：手动封装垂直自适应PageView #

如果不想改动第三方包源码，可自行封装对应组件，核心实现步骤如下：

核心逻辑：测量每个子项高度 + 监听滚动进度 + 动态设置容器高度 + 平滑过渡

• 首先定义组件接收参数：子组件列表List<Widget> children、垂直滚动用的PageController、是否允许翻页等通用PageView参数
• 为每个子组件包裹带GlobalKey的测量组件，在initState和didUpdateWidget生命周期中获取所有子组件的实际高度，存入List<double> itemHeights数组
• 外层用AnimatedContainer包裹PageView，将PageView的scrollDirection设为Axis.vertical，关闭PageView本身的高度约束，设置shrinkWrap: true
• 给PageController添加滚动监听，每次滚动时计算当前滚动进度：当前页索引currentPage、滚动偏移占单页的百分比offsetPercent
• 根据当前页和相邻页的高度，结合滚动百分比插值计算当前需要展示的容器高度：currentHeight = itemHeights[currentPage] * (1 - offsetPercent) + itemHeights[nextPage] * offsetPercent
• 把计算得到的currentHeight赋值给AnimatedContainer的height属性，滚动时即可自动实现高度平滑过渡

方案3：IndexedStack结合手势识别实现（轻量方案，适合页面少的场景） #

如果你的引导页数量只有3-5页，可不用PageView，用更简单的方案实现：

• 用IndexedStack存储所有引导页，监听垂直滑动手势，滑动超过阈值时切换当前展示的索引
• 外层包裹AnimatedSize组件，切换索引时会自动适配当前展示子组件的高度，自带过渡动画，实现成本极低

• 子组件如果包含异步加载内容（比如网络图片），需要在内容加载完成后重新触发高度测量，避免高度计算错误
• 可给高度变化添加Curves.easeInOut等动画曲线，优化过渡效果
• 若需要垂直吸附效果，保持PageView原有的pageSnapping: true参数即可

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