## Transform變換
Transform可以在其子Widget繪制時對其應用一個矩陣變換(transformation),Matrix4是一個4D矩陣,通過它我們可以實現各種矩陣操作。下面是一個例子:
```
Container(
color: Colors.black,
child: new Transform(
alignment: Alignment.topRight, //相對于坐標系原點的對齊方式
transform: new Matrix4.skewY(0.3), //沿Y軸傾斜0.3弧度
child: new Container(
padding: const EdgeInsets.all(8.0),
color: Colors.deepOrange,
child: const Text('Apartment for rent!'),
),
),
);
```

關于矩陣變換的相關內容屬于線性代數范疇,本書不做討論,讀者有興趣可以自行了解。本書中,我們把焦點放在Flutter中一些常見的變換效果上。
### 平移
Transform.translate接收一個offset參數,可以在繪制時沿x、y軸對子widget平移指定的距離。
```
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
//默認原點為左上角,左移20像素,向上平移5像素
child: Transform.translate(offset: Offset(-20.0, -5.0),
child: Text("Hello world"),
),
)
```
效果:

### 旋轉
Transform.rotate可以對子widget進行旋轉變換,如:
```
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.rotate(
//旋轉90度
angle:math.pi/2 ,
child: Text("Hello world"),
),
);
```
> 注意:要使用math.pi需先進行如下導包。
>
>
> ```
> import 'dart:math' as math;
>
> ```
效果:

### 縮放
Transform.scale可以對子Widget進行縮小或放大,如:
```
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.scale(
scale: 1.5, //放大到1.5倍
child: Text("Hello world")
)
);
```
效果:

### 注意
- Transform的變換是應用在繪制階段,而并不是應用在布局(layout)階段,所以無論對子widget應用何種變化,其占用空間的大小和在屏幕上的位置都是固定不變的,因為這些是在布局階段就確定的。下面我們具體說明:
```
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.scale(scale: 1.5,
child: Text("Hello world")
)
),
Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),)
],
)
```
顯示效果:

由于第一個Text應用變換(放大)后,其在繪制時會放大,但其占用的空間依然為紅色部分,所以第二個text會緊挨著紅色部分,最終就會出現文字有重合部分。
- 由于矩陣變化只會作用在繪制階段,所以在某些場景下,在UI需要變化時,可以直接通過矩陣變化來達到視覺上的UI改變,而不需要去重新觸發build流程,這樣會節省layout的開銷,所以性能會比較好。如之前介紹的Flow widget,它內部就是用矩陣變換來更新UI,除此之外,Flutter的動畫widget中也大量使用了Transform以提高性能。
### RotatedBox
RotatedBox和Transform.rotate功能相似,它們都可以對子widget進行旋轉變換,但是有一點不同:RotatedBox的變換是在layout階段,會影響在子widget的位置和大小。我們將上面介紹Transform.rotate時的示例改一下:
```
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階段,所以widget會旋轉90度(而不只是繪制的內容),decoration會作用到widget所占用的實際空間上,所以就是上圖的效果。讀者可以和前面Transform.rotate示例對比理解。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示