怎么从圆形变成方形的，RadialExpansion接收到的都是kMaxRadius

Question

///外层的圆形组件
class RadialExpansion extends StatelessWidget {
  RadialExpansion({
    Key key,
    this.maxRadius,
    this.child,
  }) : clipRectSize = 2.0 * (maxRadius / math.sqrt2),
        super(key: key);

  final double maxRadius;
  final clipRectSize;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return ClipOval(
      child: Center(
        child: SizedBox(
          width: clipRectSize,
          height: clipRectSize,
          child: child,
        ),
      ),
    );
  }
}

怎么从圆形变成方形的？
RadialExpansion接收到的都是kMaxRadius一样的值，也就是clipRectSize、child是一样，
RadialExpansion外层的容器宽高的改变，就能影响到里面的圆形裁切组件改变形状吗？
不太明白这里怎么实现的形状改变。

Answer 1

慕后端3246780 2020-09-03 22:58:31

从圆变方，方变圆好像是 MaterialRectCenterArcTween 方法的作用，其实就是修改了clip里的borderRadius值，ClipOval其实是ClipRect的自行计算borderRadius的方法

Answer 2

CrazyCodeBoy 2020-07-07 20:40:20

看着像是代码设置的问题，参考下这块课程源码的实现检查你的代码看是否有出入的地方呢：

https://git.imooc.com/coding-321/flutter_trip/src/master/doc/%E5%8A%A8%E7%94%BBAnimation%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md#%E5%AE%9E%E7%8E%B0%E5%BE%84%E5%90%91hero%E5%8A%A8%E7%94%BB

• 提问者 小葱与奥特曼 #1

  我代码效果是对的，代码没问题；
  可能是因为我表述有问题，
  想问的是：出现圆形变方形效果的原理是什么？
  “明明只有改变外层容器的宽高”

• 慕设计2078437 #2

  我也有这个疑问，为什么_buildPage的图片是方的，而_buildHero里的图是圆的。是哪句代码描述圆，哪句代码描述图片是方的？