Flutter Transform使用介绍

Transform介绍

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

Transform使用

• 平移
  方法

// 创建一个widget，并且对他进行平移变换
//offset 偏移量，水平向右为正向，竖直向下为正向
// 子widget
Transform.translate({Key key, @required Offset offset, bool transformHitTests: true, Widget child })

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

Transform.translate(
  offset: const Offset(0.0, 15.0),
  child: Container(
    padding: const EdgeInsets.all(8.0),
    color: const Color(0xFF7F7F7F),
    child: const Text('Quarter'),
  ),
)

• 旋转
  方法

//创建一个widget，并且对他进行旋转变换
//angle 旋转角度
//origin 偏移量
//alignment 对齐方式
//子widget 
Transform.rotate({ Key key, @required double angle, Offset origin, AlignmentGeometry alignment: Alignment.center, bool transformHitTests: true, Widget child })

例子
顺时针旋转45°

Transform.rotate(
  angle: math.pi / 4, // 旋转45°
  child: Container(
    padding: const EdgeInsets.all(8.0),
    color: const Color(0xFFE8581C),
    child: const Text('Apartment for rent!'),
  ),
)

使用math.pi时需要引入math包 import 'dart:math' as math;

• 缩放
  方法

//scale 缩放多少倍
//origin 偏移量
//alignment 对齐方式
//子widget 
Transform.scale({ Key key, @required double scale, Offset origin, AlignmentGeometry alignment: Alignment.center, bool transformHitTests: true, Widget child })

例子
放大1.5倍

Transform.scale(
  scale: 1.5,
  child: Container(
    padding: const EdgeInsets.all(8.0),
    color: const Color(0xFFE8581C),
    child: const Text('Bad Ideas'),
  ),
)