Flutter中SizeTransition导致Container圆角未正常生效的问题求助

问题根源在于SizeTransition通过ClipRect动态裁剪子组件，动画过程中裁剪区域是直角矩形，子组件的圆角会被完全裁掉，只有当动画完成、裁剪区域覆盖整个容器时，圆角才会显示。

以下是三种可行的解决方案：

方案一：用AnimatedBuilder控制容器宽度（推荐） #

直接通过动画值控制Container的宽度，避开SizeTransition的裁剪逻辑：

Stack(
  alignment: Alignment.centerLeft,
  children: [
    Container(
      width: 300,
      height: 20,
      decoration: BoxDecoration(
          color: const Color(0XFFC41D3D).withOpacity(0.5),
          borderRadius: const BorderRadius.all(Radius.circular(15))),
    ),
    AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        // 计算当前动画对应的宽度
        final currentWidth = Tween(begin: 0.0, end: 300.0)
            .chain(CurveTween(curve: const Interval(0.0, 0.4)))
            .evaluate(_controller);
        return Container(
          width: currentWidth,
          height: 20,
          decoration: BoxDecoration(
              color: const Color(0XFFC41D3D),
              borderRadius: BorderRadius.circular(15.0)),
        );
      },
    ),
  ],
)

方案二：给子组件套ClipRRect #

保留SizeTransition的同时，用ClipRRect对子组件进行圆角裁剪，让裁剪区域匹配圆角：

Stack(
  alignment: Alignment.centerLeft,
  children: [
    Container(
      width: 300,
      height: 20,
      decoration: BoxDecoration(
          color: const Color(0XFFC41D3D).withOpacity(0.5),
          borderRadius: const BorderRadius.all(Radius.circular(15))),
    ),
    SizeTransition(
      axis: Axis.horizontal,
      sizeFactor: Tween(begin: 0.0, end: 1.0)
          .chain(CurveTween(curve: const Interval(0.0, 0.4)))
          .animate(_controller),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(15.0),
        // 直接用color代替decoration，避免重复设置圆角
        child: Container(
          width: 300,
          height: 20,
          color: const Color(0XFFC41D3D),
        ),
      ),
    ),
  ],
)

方案三：用Align组件控制宽度 #

通过Align的widthFactor属性配合动画实现尺寸变化，同样能避免裁剪问题：

Stack(
  alignment: Alignment.centerLeft,
  children: [
    Container(
      width: 300,
      height: 20,
      decoration: BoxDecoration(
          color: const Color(0XFFC41D3D).withOpacity(0.5),
          borderRadius: const BorderRadius.all(Radius.circular(15))),
    ),
    Align(
      alignment: Alignment.centerLeft,
      widthFactor: Tween(begin: 0.0, end: 1.0)
          .chain(CurveTween(curve: const Interval(0.0, 0.4)))
          .evaluate(_controller),
      child: Container(
        width: 300,
        height: 20,
        decoration: BoxDecoration(
            color: const Color(0XFFC41D3D),
            borderRadius: BorderRadius.circular(15.0)),
      ),
    ),
  ],
)

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