Flutter（十五）Transform变换

Transform

可以对widget进行旋转、倾斜、缩放和平移操作

RotatedBox

可以对widget进行旋转操作

 RotatedBox(
                  quarterTurns: 1, //1顺时针90度，2顺时针180度，3 顺时针270度 ，4顺时针360度
                  child: Text("Hello world")
              ),

image.png

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.all(50),
              color: Colors.orange[200],
              child: new Transform(
                alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
//                transform: new Matrix4.skew(0.5,0.3), //沿xY轴倾斜弧度
//              transform: new Matrix4.skewX(0.4),
              transform: new Matrix4.skewY(0.4),
                child: new Container(
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.deepOrange,
                  child: const Text('new Matrix4.skewY(0.4)'),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.all(50),
              color: Colors.orange[200],
              child: new Transform(
                alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
//                transform: new Matrix4.skew(0.5,0.3), //沿xY轴倾斜弧度
//              transform: new Matrix4.skewX(0.4),
                transform: new Matrix4.translationValues(20, 20, 30),// 平移xyz
                child: new Container(
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.deepOrange,
                  child: const Text('new Matrix4.translationValues(20, 20, 30)'),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.all(50),
              color: Colors.orange[200],
              child: new Transform(
                alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
                transform: new Matrix4.rotationZ(0.4),// 旋转
                child: new Container(
                  padding: const EdgeInsets.all(8.0),
                  color: Colors.deepOrange,
                  child: const Text('new Matrix4.rotationZ(0.4)'),
                ),
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              color: Colors.orange[200],
              child: Transform.scale(
                  scale: 1.5, //放大到1.5倍
                  child: Text("Transform.scale 1.5")
              ),
            ),
            Container(
              margin: EdgeInsets.all(20),
              color: Colors.orange[200],
              child: RotatedBox(
                  quarterTurns: 1, //1顺时针90度，2顺时针180度，3 顺时针270度 ，4顺时针360度
                  child: Text("RotatedBox")
              ),
            ),
          ],
        ),
      ),
    );
  }
}