4、Flutter Widget - Transform;

2,069 阅读1分钟

  Transform Widget可以将简单的程序转换为令人惊叹的东西。如果要将一个Widget旋转45度,将其包裹在Transform小部件中:

class TransformDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
        angle: pi/4,
        child: Image.asset("image.png"),
    );
  }
}

  当然还有scale、translate等操作。

  倾斜:

class TransformDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.skewX(0.3),
      child: Image.asset("image.png"),
    );
  }
}

  3D视角矩阵:

class TransformDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Transform(
      transform: Matrix4.identity()
      ..setEntry(3, 2, 0.01)
      ..rotateX(0.6),
      alignment: FractionalOffset.center,
      child: Image.asset("image.png"),
    );
  }
}