Flutter中如何在PageView内实现类Hero过渡动画？

嘿，这个需求我之前做项目的时候刚好碰到过！因为Hero组件本来是为跨Navigator路由的页面过渡设计的，而PageView是同一路由内的视图切换，所以直接用Hero肯定不行。不过咱们有两种靠谱的方式来实现类似的共享元素过渡效果，给你详细说说：

这种方式需要我们自己掌控PageView的滚动进度，然后动态调整图片的位置、尺寸，模拟Hero的平滑过渡效果，自由度最高。

1. 搭建基础结构
   给PageView的目标页面都放置相同的图片组件，同时用一个全局Stack来承载“共享”的图片层——这个层会悬浮在PageView上方，独立完成动画。

2. 监听滚动进度
   通过PageController.addListener()获取页面偏移量，计算出0到1之间的过渡进度值，用来驱动动画变化。

3. 根据进度动态调整图片属性
   利用AnimatedBuilder或Transform组件，根据进度值让图片从当前页的位置平滑过渡到下一页的目标位置，同时处理原页面图片的透明度，避免重叠。

完整代码示例：

class PageViewHeroLike extends StatefulWidget {
  @override
  _PageViewHeroLikeState createState() => _PageViewHeroLikeState();
}

class _PageViewHeroLikeState extends State<PageViewHeroLike> {
  final PageController _pageController = PageController();
  double _transitionProgress = 0.0;
  final GlobalKey _page1ImageKey = GlobalKey();
  final GlobalKey _page2ImageKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      // 仅处理第0页到第1页的过渡，可根据需求扩展多页逻辑
      if (_pageController.page! >= 0 && _pageController.page! < 1) {
        setState(() {
          _transitionProgress = _pageController.page!;
        });
      }
    });
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  // 获取组件在屏幕上的绝对位置和尺寸
  Rect _getWidgetScreenRect(GlobalKey key) {
    final renderBox = key.currentContext?.findRenderObject() as RenderBox;
    final screenOffset = renderBox.localToGlobal(Offset.zero);
    return Rect.fromLTWH(
      screenOffset.dx,
      screenOffset.dy,
      renderBox.size.width,
      renderBox.size.height,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          PageView(
            controller: _pageController,
            children: [
              _buildPage(0, _page1ImageKey),
              _buildPage(1, _page2ImageKey),
              // 可添加更多页面
            ],
          ),
          // 仅在过渡过程中显示动画层
          if (_transitionProgress > 0 && _transitionProgress < 1)
            Positioned.fromRect(
              rect: Rect.lerp(
                _getWidgetScreenRect(_page1ImageKey),
                _getWidgetScreenRect(_page2ImageKey),
                _transitionProgress,
              )!,
              child: Image.asset(
                'assets/your_target_image.png', // 替换为你的图片路径
                width: _getWidgetScreenRect(_page1ImageKey).width,
                height: _getWidgetScreenRect(_page1ImageKey).height,
                fit: BoxFit.cover,
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildPage(int index, GlobalKey imageKey) {
    return Center(
      child: index == 0 || index == 1
          ? Opacity(
              // 过渡时逐渐隐藏原页面图片，避免重叠
              opacity: index == 0 ? (1 - _transitionProgress) : _transitionProgress,
              child: Image.asset(
                'assets/your_target_image.png',
                key: imageKey,
                width: index == 0 ? 200 : 300, // 两页图片尺寸可不同，模拟Hero的缩放效果
                height: index == 0 ? 200 : 300,
                fit: BoxFit.cover,
              ),
            )
          : Container(
              color: Colors.grey[200],
              child: const Center(child: Text('其他页面')),
            ),
    );
  }
}

如果觉得手动写动画太繁琐，可以用专门处理共享元素过渡的第三方库，比如shared_element_transition——它支持同一路由内的组件过渡，用法和Hero很像，能省不少事儿。

1. 添加依赖
   在pubspec.yaml中加入最新版本的依赖：

   dependencies:
     shared_element_transition: ^latest_version
   

2. 快速实现过渡
   用SharedElementTransitionScope包裹PageView，然后给需要过渡的图片加上SharedElement组件，指定相同的ID即可：

代码示例：

class PageViewWithSharedTransition extends StatefulWidget {
  @override
  _PageViewWithSharedTransitionState createState() => _PageViewWithSharedTransitionState();
}

class _PageViewWithSharedTransitionState extends State<PageViewWithSharedTransition> {
  final PageController _pageController = PageController();
  static const String _sharedImageId = 'my_shared_image';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SharedElementTransitionScope(
        child: PageView(
          controller: _pageController,
          children: [
            SharedElementTransition(
              key: const ValueKey('page_0'),
              child: Center(
                child: SharedElement(
                  id: _sharedImageId,
                  child: Image.asset(
                    'assets/your_target_image.png',
                    width: 200,
                    height: 200,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            SharedElementTransition(
              key: const ValueKey('page_1'),
              child: Center(
                child: SharedElement(
                  id: _sharedImageId,
                  child: Image.asset(
                    'assets/your_target_image.png',
                    width: 350,
                    height: 350,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• 手动方案要记得处理反向滚动（比如从第1页滚回第0页）的进度计算，避免动画异常。
• 使用第三方库时，要确认库的版本和你的Flutter版本兼容，避免出现编译问题。
• 图片的fit属性尽量保持一致，否则过渡时可能出现拉伸变形的情况。

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