绘制 child 之前 Transform 会对 child 进行平移，旋转缩放等变换。Transform 不会对 size 造成影响。
Transform 介绍
Transform 继承自 SingleChildRenderObjectWidget，RenderTransform 继承自 RenderProxyBox，所以 Transform 也能算作是 布局 widget ，但是他并没有 override PerformLayout，对布局方面没有什么建树，完全继承父类的行为， 有 child 的时候 size 和 child 一样大。源码方面就是用 canvas 画出来，对于 Transform 最重要的就是如何使用，理解每个参数的作用。
const Transform({ super.key, required this.transform, this.origin, this.alignment, this.transformHitTests = true, this.filterQuality, super.child, }) 复制代码
我们看下这些参数都如何用。
Matrix4 变换 transform
transform 是一个 Matrix4，可以直接使用它来控制如何变换，只是有些复杂。
Matrix4 平移
atrix4.translationValues(offset.dx, offset.dy, 0.0) 复制代码
Matrix4 缩放
Matrix4.diagonal3Values(scaleX, scaleY, 1) 复制代码
Matrix4 旋转
static Matrix4 _createZRotation(double sin, double cos) { final Matrix4 result = Matrix4.zero(); result.storage[0] = cos; result.storage[1] = sin; result.storage[4] = -sin; result.storage[5] = cos; result.storage[10] = 1.0; result.storage[15] = 1.0; return result; } static Matrix4 _computeRotation(double radians) { assert(radians.isFinite, 'Cannot compute the rotation matrix for a non-finite angle: $radians'); if (radians == 0.0) { return Matrix4.identity(); } final double sin = math.sin(radians); if (sin == 1.0) { return _createZRotation(1.0, 0.0); } if (sin == -1.0) { return _createZRotation(-1.0, 0.0); } final double cos = math.cos(radians); if (cos == -1.0) { return _createZRotation(0.0, -1.0); } return _createZRotation(sin, cos); } transform = _computeRotation(angle); 复制代码
直接使用还是很麻烦的，所以我们一般用命名构造函数，就不用关心 Matrix4 了，直接用相关参数即可。
Transform.translate( offset: const Offset(0.0, 15.0), child: Container( padding: const EdgeInsets.all(8.0), color: const Color(0xFF7F7F7F), child: const Text('Quarter'), ), ) 复制代码
Transform.scale( scale: 0.5, child: Container( padding: const EdgeInsets.all(8.0), color: const Color(0xFFE8581C), child: const Text('Bad Idea Bears'), ), ) 复制代码
Transform.rotate( angle: -pi / 12.0, child: Container( padding: const EdgeInsets.all(8.0), color: const Color(0xFFE8581C), child: const Text('Apartment for rent!'), ), ) 复制代码
需要注意的是 angle 是一个弧度，一周是 2pi。 用 pi 需要 import 'dart:math';
如果要扭曲还是得直接用 Matrix4.skewX， Matrix4.skewY, Matrix4.skew
Transform origin
origin 是应用变换的原点。默认情况下 scale，roate 的变换原点是 center（ alignment 默认是 center )。origin是一个offset。 dx 为正表示原点向左偏移，为负向右偏移；dy 为正向上偏移，为负向下偏移。
Container( decoration: BoxDecoration(border: Border.all(color: Colors.red)), child: Transform.scale( origin: Offset(50,50), scale: 2, child: Container( width: 100, height: 100, color: Color.fromRGBO(0, 0, 200, .2), ), )) 复制代码
origin: Offset(-50,-50), 复制代码
摆放 child
alignment 和 origin 的效果是一样的，都是平移 child，他们可以同时存在，效果叠加。
比如上面的例子。把默认的 alignment:Alignment.center 改为 alignment:Alignment.topLeft。
Transform.scale( alignment:Alignment.topLeft , origin: Offset(0,0), 复制代码
Transform.scale( alignment:Alignment.topLeft , origin: Offset(50,50), 复制代码
transformHitTests
transformHitTests 默认为true，点击的 local 位置是相对于变换后的 child，否则是相对于变换前的 child。
