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

来源:7-10 动画Animation开发指南-Hero动画-2

小葱与奥特曼

2020-07-07

///外层的圆形组件
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外层的容器宽高的改变,就能影响到里面的圆形裁切组件改变形状吗?
不太明白这里怎么实现的形状改变。

写回答

2回答

慕后端3246780

2020-09-03

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

0
0

CrazyCodeBoy

2020-07-07

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

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


0
2
慕设计2078437
我也有这个疑问,为什么_buildPage的图片是方的,而_buildHero里的图是圆的。是哪句代码描述圆,哪句代码描述图片是方的?
2021-04-20
共2条回复

Flutter从入门到进阶 实战携程网App 一网打尽核心技术

解锁Flutter开发新姿势,,系统掌握Flutter开发核心技术。

4788 学习 · 3270 问题

查看课程