Flutter：如何在Hero动画过程中改变子元素尺寸？

嘿，这个场景我太熟悉了！默认情况下Hero只会对整个子组件做整体的尺寸/位置动画，不会自动同步内部属性的变化，所以你的AspectRatio会直接跳变。不过我们可以利用Hero动画的进度值来手动驱动宽高比的平滑过渡，这里给你两种靠谱的实现方式：

方案一：自定义Hero的穿梭组件（flightShuttleBuilder） #

这个方法适合跨页面跳转的Hero场景，我们可以在Hero的flightShuttleBuilder里拿到动画进度，用它来插值计算宽高比：

Widget build(BuildContext context) {
  return Hero(
    tag: 'your-hero-tag',
    flightShuttleBuilder: (
      BuildContext flightContext,
      Animation<double> animation,
      HeroFlightDirection flightDirection,
      BuildContext fromHeroContext,
      BuildContext toHeroContext,
    ) {
      // 根据动画进度和跳转方向计算目标宽高比
      final double startAspect = flightDirection == HeroFlightDirection.push ? 1.0 : 1.3;
      final double endAspect = flightDirection == HeroFlightDirection.push ? 1.3 : 1.0;
      final double currentAspect = Tween<double>(begin: startAspect, end: endAspect).animate(animation).value;

      // 返回自定义的穿梭组件，用currentAspect驱动AspectRatio
      return Column(
        children: <Widget>[
          AspectRatio(
            aspectRatio: currentAspect,
            child: // 你的头部内容
          ),
          Container(
            child: // 通用描述内容
          ),
        ],
      );
    },
    child: Column(
      children: <Widget>[
        AspectRatio(
          aspectRatio: expanded ? 1.3 : 1.0,
          child: // 你的头部内容
        ),
        Container(
          child: // 通用描述内容
        ),
      ],
    ),
  );
}

方案二：利用AnimatedBuilder监听Hero动画（同页面状态切换场景） #

如果你的expanded是同页面内的状态切换，同时要结合Hero动画的话，我们可以把aspectRatio的变化绑定到动画控制器上，同步Hero的动画节奏：

class _YourWidgetState extends State<YourWidget> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> _aspectAnimation;
  bool _expanded = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _aspectAnimation = Tween<double>(begin: 1.0, end: 1.3).animate(_animationController);
  }

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

  void _toggleExpanded() {
    setState(() {
      _expanded = !_expanded;
    });
    _expanded ? _animationController.forward() : _animationController.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: 'your-hero-tag',
      child: Column(
        children: <Widget>[
          AnimatedBuilder(
            animation: _aspectAnimation,
            builder: (context, child) {
              return AspectRatio(
                aspectRatio: _aspectAnimation.value,
                child: child,
              );
            },
            child: // 你的头部内容
          ),
          Container(
            child: // 通用描述内容
          ),
        ],
      ),
    );
  }
}

额外提示：解决动画溢出问题 #

你提到的动画过程中溢出问题，通常是组件尺寸变化时子内容超出边界导致的。可以给AspectRatio的子组件外层包裹ClipRect来裁剪溢出内容，或者配合ScaleTransition同步缩放子内容，避免出现布局溢出的情况。

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