Flutter Transform使用介绍

Posted 2023-04-28

参考技术A 窗口小部件(Widget)可以在Paint之前应用Transform进行转换，通过Transform可以对widget进行平移、旋转、缩放等矩阵变换。不像RotatedBox在layout前就对Widget进行旋转操作，Transform是在Widget绘制前进行转换，这意味着在计算Widget的显示需要占用多少空间时，不会去考虑Transform变换。

例子
在垂直方向移动15个单位距离

例子
顺时针旋转45°

例子
放大1.5倍

Flutter控件——容器控件：变换Transform

变换（Transform）

Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵，通过它我们可以实现各种矩阵操作。

basic.dart

class Transform extends SingleChildRenderObjectWidget 
  /// Creates a widget that transforms its child.
  ///
  /// The [transform] argument must not be null.
  const Transform(
    Key? key,
    required this.transform,
    this.origin,
    this.alignment,
    this.transformHitTests = true,
    this.filterQuality,
    Widget? child,
  )

eg：

Container(
  color: Colors.black,
  child: Transform(
    alignment: Alignment.topRight, //相对于坐标系原点的对齐方式
    transform: Matrix4.skewY(0.3), //沿Y轴倾斜0.3弧度
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: Colors.deepOrange,
      child: const Text('Apartment for rent!'),
    ),
  ),
)

平移 Transform.translate

Transform.translate接收一个offset参数，可以在绘制时沿x、y轴对子组件平移指定的距离。

DecoratedBox(
  decoration:BoxDecoration(color: Colors.red),
  //默认原点为左上角，左移20像素，向上平移5像素
  child: Transform.translate(
    offset: Offset(-20.0, -5.0),
    child: Text("Hello world"),
  ),
)

旋转 Transform.rotate

Transform.rotate可以对子组件进行旋转变换，如：

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

ps: 要使用math.pi需先进行导包：import ‘dart:math’ as math;

缩放 Transform.scale

Transform.scale可以对子组件进行缩小或放大，如：

   DecoratedBox(
     decoration:BoxDecoration(color: Colors.red),
     child: Transform.scale(
       scale: 1.5, //放大到1.5倍
       child: Text("Hello world")
     )
   );

注意事项

• Transform的变换是应用在绘制阶段，而并不是应用在布局(layout)阶段，所以无论对子组件应用何种变化，其占用空间的大小和在屏幕上的位置都是固定不变的，因为这些是在布局阶段就确定的。

RotatedBox

RotatedBox和Transform.rotate功能相似，它们都可以对子组件进行旋转变换，但是有一点不同：RotatedBox的变换是在layout阶段，会影响在子组件的位置和大小。
eg:

   Row(
     mainAxisAlignment: MainAxisAlignment.center,
     children: <Widget>[
       DecoratedBox(
         decoration: BoxDecoration(color: Colors.red),
         //将Transform.rotate换成RotatedBox
         child: RotatedBox(
           quarterTurns: 1, //旋转90度(1/4圈)
           child: Text("Hello world"),
         ),
       ),
       Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),)
     ],
   ),

• 由于RotatedBox是作用于layout阶段，所以子组件会旋转90度（而不只是绘制的内容），decoration会作用到子组件所占用的实际空间上，所以最终就是上图的效果。