如何让PageView实现Apple TV应用头部的轮播视差效果？

核心思路 #

放弃直接修改viewportFraction，改用自定义PageTransformer结合动态缩放+位移实现单页过渡效果——因为viewportFraction是全局属性，无法单独控制单个页面的显示状态。

具体实现步骤 #

1. 自定义PageTransformer #

通过PageTransformer的transformPage方法，根据页面偏移量（position参数）动态计算当前页和相邻页的缩放、位移：

• 页面处于屏幕中心（position=0）：缩放为1（全屏），位移为0
• 页面为右侧待显示页（position在0到1之间）：固定初始缩放比例（比如0.7），定位到屏幕中心，随滚动逐步放大至全屏
• 左侧已滑出页面：设置缩放+位移让其滑出视野，或直接隐藏

示例代码（Flutter）：

class AppleTVPageTransformer extends PageTransformer {
  final double _scaleFactor = 0.7;

  @override
  void transformPage(Widget page, double position) {
    final screenWidth = MediaQuery.of(page.context).size.width;
    
    if (position >= 0 && position <= 1) {
      // 右侧待进入页面：从中心小图放大到全屏
      page.transform = Matrix4.identity()
        ..scale(1 - (1 - _scaleFactor) * position)
        ..translate((1 - position) * screenWidth / 2);
    } else if (position < 0) {
      // 左侧已滑出页面：缩放并左移
      page.transform = Matrix4.identity()
        ..scale(_scaleFactor + (1 - _scaleFactor) * (1 + position))
        ..translate(position * screenWidth);
    } else {
      // 超出范围页面隐藏
      page.opacity = 0;
    }
  }
}

2. 结合PageView使用 #

将自定义AppleTVPageTransformer传给PageView的pageTransformer参数，同时设置viewportFraction=1（保证每页默认占满屏幕）：

PageView(
  controller: PageController(viewportFraction: 1),
  pageTransformer: AppleTVPageTransformer(),
  children: [
    ParallaxPage(imageUrl: 'assets/banner1.jpg'),
    ParallaxPage(imageUrl: 'assets/banner2.jpg'),
    ParallaxPage(imageUrl: 'assets/banner3.jpg'),
  ],
)

3. 添加视差效果 #

在每个页面内部，给图片添加独立位移动画，让图片滚动速度慢于页面，实现视差：

class ParallaxPage extends StatelessWidget {
  final String imageUrl;
  const ParallaxPage({super.key, required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    final pageController = PageController.of(context);
    return AnimatedBuilder(
      animation: pageController,
      builder: (context, child) {
        final pageOffset = pageController.page ?? 0;
        final currentPageIndex = PageView.of(context).children.indexOf(child!);
        final parallaxOffset = -(pageOffset - currentPageIndex) * 60; // 视差偏移量，可调整
        return Transform.translate(
          offset: Offset(parallaxOffset, 0),
          child: child,
        );
      },
      child: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage(imageUrl),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

关键注意点 #

• 不要依赖viewportFraction做单页过渡，它是全局配置，无法单独控制某一页的显示比例
• 调整scaleFactor和视差偏移量可匹配Apple TV视觉效果，建议参考示例图反复调试
• 若需要稳定的手势反馈，确保PageController的keepPage属性设为true

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