Flutter自定义Widget—随滑动改变高度的PageView

最新推荐文章于 2025-08-25 15:33:21 发布

原创最新推荐文章于 2025-08-25 15:33:21 发布 · 2.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#flutter #widget

收录于

Flutter 专栏收录该内容

12 篇文章

订阅专栏

该博客介绍了如何使用Flutter的PageController动态调整PageView中图片容器的高度，以实现随着滑动展示不同高度图片的效果。通过监听PageController的滑动事件，根据当前和相邻页面的位置，计算并更新容器的高度。

可以随滑动展示不同高度的图片

效果

实现方案

使用PageController对PageView滑动监听，动态设置容器高度。

核心代码

_pageController.addListener(() {
      setState(() {
        //向左滑
        if (_pageController.page > _currentIndex) {
          _currentIndex = _pageController.page.floor();
          _nextIndex = _pageController.page.ceil();
          /* print(
              "向左滑--->value = ${_pageController.page}\n current index = $_currentIndex");*/
          _pageViewHeight = _heightList[_currentIndex] +
              (_heightList[_nextIndex] - _heightList[_currentIndex]) *
                  (_pageController.page - _currentIndex);
        }
        //向右滑
        else if (_pageController.page < _currentIndex) {
          _currentIndex = _pageController.page.ceil();
          _nextIndex = _pageController.page.floor();
          /*print(
              "向右滑--->value = ${_pageController.page}\n current index = $_currentIndex");*/
          _pageViewHeight = _heightList[_currentIndex] +
              (_heightList[_nextIndex] - _heightList[_currentIndex]) *
                  (_currentIndex - _pageController.page);
        }
      });
    });