4、Flutter Widget - Transform;

  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"),
    );
  }
}
複製程式碼