欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

《Flutter 控件大全》第九十九:Transform

程序员文章站 2022-03-11 19:13:46
...
  • 如果你对Flutter还有疑问或者技术方面的疑惑,欢迎加入Flutter交流群(微信:laomengit)。
  • 同时也欢迎关注我的Flutter公众号【老孟程序员】,公众号首发Flutter的相关内容。
  • Flutter地址:http://laomengit.com 里面包含160多个组件的详细用法。

Transform可以对子组件进行变化,比如旋转、平移、缩放等。

基本用法:

return Transform(
  transform: Matrix4.rotationZ(0.5),
  child: Container(
    height: 100,
    width: 100,
    color: Colors.red,
  ),
);

transform参数是变化4x4矩阵,上面的案例是绕z轴旋转弧度,效果如下:

《Flutter 控件大全》第九十九:Transform

origin参数表示变换矩阵的坐标,默认是(0,0)即左上角,如果想围绕圆心旋转,代码如下;

Container(
  color: Colors.blue,
  child: Transform(
    transform: Matrix4.rotationZ(0.5),
    origin: Offset(50, 50),
    child: Container(
      height: 100,
      width: 100,
      color: Colors.red,
    ),
  ),
)

效果如下:

《Flutter 控件大全》第九十九:Transform

Transform为方便调用构建了Transform.translateTransform.rotateTransform.scale,用法如下:

Transform.scale(
  scale: 0.5,
  child: Container(
    height: 100,
    width: 100,
    color: Colors.red,
  ),
)