变换

Transform 可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4 是一个 4D 矩阵,通过它我们可以实现各种矩阵操作

平移

Transform.translate 接收一个 offset 参数,可以在绘制时沿 x、y 轴对子组件平移指定的距离。

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  // 默认原点为左上角,左移20像素,向上平移5像素
  child: Transform.translate(
    offset: Offset(-20.0, -5.0),
    child: Text("Hello world"),
  )
)

缩放

Transform.scale 可以对子组件进行缩小或放大,如:

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.scale(
    scale: 1.5, // 放大到1.5倍
    child: Text("Hello world")
  )
)

旋转

Transform.rotate 可以对子组件进行旋转变换,如:

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  child: Transform.rotate(
    //旋转90度
    angle:math.pi/2 ,
    child: Text("Hello world"),
  ),
)

注意:要使用 math.pi 需先进行如下导包。

import 'dart:math' as math;

RotatedBox

RotatedBox 和 Transform.rotate 功能相似,它们都可以对子组件进行旋转变换,但是有一点不同:RotatedBox 的变换是在 layout 阶段,会影响在子组件的位置和大小。我们将上面介绍 Transform.rotate 时的示例改一下:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    DecoratedBox(
      decoration: BoxDecoration(color: Colors.red),
      // 将Transform.rotate换成RotatedBox
      child: RotatedBox(
        quarterTurns: 1, // 旋转90度(1/4圈)
        child: Text("Hello world"),
      ),
    ),
    Text(
      "你好",
      style: TextStyle(color: Colors.green, fontSize: 18.0),
    )
  ],
)

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress