Flutter Transform变形

Flutter Transform变形

概述

• Transform可以对子组件进行变化，比如旋转、平移、缩放等。
• Transform变形是通过矩阵变换实现的，发生在绘制阶段，而不是布局阶段，所以对子组件任何变化，都不会影响其占用的空间。

平移

DecoratedBox(
    child: Transform.translate(
        offset: Offset(10, 10), //默认原点左上角，向右平移10，向下平移10
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

旋转

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

缩放

DecoratedBox(
    child: Transform.scale(
        scale: 2,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)

倾斜

Container(
    color: Colors.black,
    child: Transform(
        alignment: Alignment.topRight,
        transform: Matrix4.skewY(0.3),
        child: Container(
            padding: EdgeInsets.all(8),
            color: Colors.red,
            child: Text("  hello transform!  "),
        ),
    ),
)

RotatedBox

RotatedBox与Transform.rotate()功能类似，但是RotatedBox是变化是在layout阶段，所以会影响子组件的位置和大小。

DecoratedBox(
    child: RotatedBox(
        quarterTurns: 1,
        child: Text("hello world"),
    ),
    decoration: BoxDecoration(color: Colors.red),
)