Flutter使用viewport与ScrollController实现PageView.builder滚动平滑过渡

你的问题根源是直接修改PageController的viewportFraction会触发整个PageView的全局重布局，子页面的可用宽度实时变化导致文本重排，且数值修改没有做平滑插值才会出现跳变效果。推荐按以下方案优化：

核心优化思路 #

放弃动态修改viewportFraction，改为固定viewportFraction: 1，所有露出、缩放、淡入淡出效果都通过子页面的变换属性实现，避免全局重布局。

具体实现步骤 #

• 1. 优化PageView配置 #

  固定PageController的viewportFraction为1，新增控制器监听获取页面滚动的实时偏移，替换原有的切页才更新状态的逻辑：

  class _CarouselHolderState extends State<CarouselHolder> {
    int currentPage = 0;
    double factor = 0.90;
    // 新增PageController作为成员变量
    late PageController pageController;
  
    @override
    void initState() {
      super.initState();
      pageController = PageController(initialPage: 0, viewportFraction: 1);
      // 监听页面滚动实时更新状态，保证过渡平滑
      pageController.addListener(() {
        setState(() {});
      });
    }
  
    @override
    void dispose() {
      pageController.dispose();
      super.dispose();
    }
  }
  

• 2. 子页面添加连续过渡效果 #

  基于当前页面滚动偏移，计算每个子页面的透明度和水平偏移，替换原有的固定二档透明度逻辑，保证切页时过渡完全平滑：

  PageView.builder(
    itemBuilder: (context, i) {
      // 计算当前页面和目标页面的偏移差值
      final pageDiff = pageController.hasClients ? (i - pageController.page!) : (i - currentPage).toDouble();
      // 透明度插值：差值越大透明度越低，最低为0.8，和原有逻辑对齐
      final opacity = 1 - (pageDiff.abs() * 0.2).clamp(0, 0.2);
      // 水平偏移插值：差值越大越往外侧偏移，模拟viewportFraction<1的露出效果
      final offsetX = pageDiff * 20;
  
      return Opacity(
        opacity: opacity,
        child: Transform.translate(
          offset: Offset(offsetX, 0),
          // 用AnimatedPadding包裹内容，实现上下滚动时的宽度平滑变化
          child: AnimatedPadding(
            duration: const Duration(milliseconds: 100),
            curve: Curves.linear,
            padding: EdgeInsets.symmetric(horizontal: (1 - factor) * 16),
            child: DetailViewScreen(
              onViewPortFactorChanged: (double val) {
                setState(() {
                  factor = val;
                });
              },
            ),
          ),
        ),
      );
    },
    itemCount: data.length,
    controller: pageController,
    onPageChanged: (i) {
      setState(() {
        factor = 0.90;
        currentPage = i;
      });
    },
  )
  

• 3. 简化滚动监听逻辑 #

  替换原有循环判断的冗余逻辑，直接通过滚动偏移计算factor，性能更高且数值连续：

  _scrollListener() {
    // 滚动0~400px时，factor从0.9线性涨到1.0
    final scrollPct = (_scrollController!.offset / 400).clamp(0, 1);
    final newFactor = 0.9 + scrollPct * 0.1;
    widget.onViewPortFactorChanged?.call(newFactor);
  }
  

额外优化建议 #

如果需要子页面上下滚动时，左右页面的淡出效果同步变化，可以把factor也纳入透明度的计算逻辑，比如factor越大，非当前页的透明度越低，实现滚动时左右页面逐渐消失的效果。

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