Flutter基礎-016-Transform變換

天色將變發表於2021-03-01
FlutterORM
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")
              ),
            ),
          ],
        ),
      ),
    );
  }
}

複製程式碼

相關文章