W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
Transform
可以在其子組件繪制時對其應(yīng)用一些矩陣變換來實(shí)現(xiàn)一些特效。Matrix4
是一個 4D 矩陣,通過它我們可以實(shí)現(xiàn)各種矩陣操作,下面是一個例子:
Container(
color: Colors.black,
child: new Transform(
alignment: Alignment.topRight, //相對于坐標(biāo)系原點(diǎn)的對齊方式
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!'),
),
),
);
運(yùn)行效果如圖5-10所示:
關(guān)于矩陣變換的相關(guān)內(nèi)容屬于線性代數(shù)范疇,本書不做討論,讀者有興趣可以自行了解。本書中,我們把焦點(diǎn)放在 Flutter 中一些常見的變換效果上。另外,由于矩陣變化時發(fā)生在繪制時,而無需重新布局和構(gòu)建等過程,所以性能很好。
Transform.translate
接收一個offset
參數(shù),可以在繪制時沿x
、y
軸對子組件平移指定的距離。
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
//默認(rèn)原點(diǎn)為左上角,左移20像素,向上平移5像素
child: Transform.translate(
offset: Offset(-20.0, -5.0),
child: Text("Hello world"),
),
)
效果如圖5-11所示:
Transform.rotate
可以對子組件進(jìn)行旋轉(zhuǎn)變換,如:
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.rotate(
//旋轉(zhuǎn)90度
angle:math.pi/2 ,
child: Text("Hello world"),
),
);
注意:要使用
math.pi
需先進(jìn)行如下導(dǎo)包。
import 'dart:math' as math;
效果如圖5-12所示:
Transform.scale
可以對子組件進(jìn)行縮小或放大,如:
DecoratedBox(
decoration:BoxDecoration(color: Colors.red),
child: Transform.scale(
scale: 1.5, //放大到1.5倍
child: Text("Hello world")
)
);
效果如圖5-13所示:
Transform
的變換是應(yīng)用在繪制階段,而并不是應(yīng)用在布局(layout)階段,所以無論對子組件應(yīng)用何種變化,其占用空間的大小和在屏幕上的位置都是固定不變的,因為這些是在布局階段就確定的。下面我們具體說明: 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),)
],
)
運(yùn)行效果如圖5-14所示:
由于第一個Text
應(yīng)用變換(放大)后,其在繪制時會放大,但其占用的空間依然為紅色部分,所以第二個Text
會緊挨著紅色部分,最終就會出現(xiàn)文字重合。
Flow
組件,它內(nèi)部就是用矩陣變換來更新 UI,除此之外,F(xiàn)lutter 的動畫組件中也大量使用了Transform
以提高性能。思考題:使用
Transform
對其子組件先進(jìn)行平移然后再旋轉(zhuǎn)和先旋轉(zhuǎn)再平移,兩者最終的效果一樣嗎?為什么?
RotatedBox
和Transform.rotate
功能相似,它們都可以對子組件進(jìn)行旋轉(zhuǎn)變換,但是有一點(diǎn)不同:RotatedBox
的變換是在 layout 階段,會影響在子組件的位置和大小。我們將上面介紹Transform.rotate
時的示例改一下:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
DecoratedBox(
decoration: BoxDecoration(color: Colors.red),
//將Transform.rotate換成RotatedBox
child: RotatedBox(
quarterTurns: 1, //旋轉(zhuǎn)90度(1/4圈)
child: Text("Hello world"),
),
),
Text("你好", style: TextStyle(color: Colors.green, fontSize: 18.0),)
],
),
效果如圖5-15所示:
由于RotatedBox
是作用于 layout 階段,所以子組件會旋轉(zhuǎn)90度(而不只是繪制的內(nèi)容),decoration
會作用到子組件所占用的實(shí)際空間上,所以最終就是上圖的效果,讀者可以和前面Transform.rotate
示例對比理解。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: