Transform介紹

窗口小部件(Widget)可以在Paint之前應用Transform進行轉(zhuǎn)換，通過Transform可以對widget進行平移、旋轉(zhuǎn)、縮放等矩陣變換。不像RotatedBox在layout前就對Widget進行旋轉(zhuǎn)操作，Transform是在Widget繪制前進行轉(zhuǎn)換，這意味著在計算Widget的顯示需要占用多少空間時，不會去考慮Transform變換。

Transform使用

• 平移
  方法

// 創(chuàng)建一個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'),
  ),
)

• 旋轉(zhuǎn)
  方法

//創(chuàng)建一個widget，并且對他進行旋轉(zhuǎn)變換
//angle 旋轉(zhuǎn)角度
//origin 偏移量
//alignment 對齊方式
//子widget 
Transform.rotate({ Key key, @required double angle, Offset origin, AlignmentGeometry alignment: Alignment.center, bool transformHitTests: true, Widget child })

例子
順時針旋轉(zhuǎn)45°

Transform.rotate(
  angle: math.pi / 4, // 旋轉(zhuǎn)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'),
  ),
)