雖然我們在開發(fā)APP的過程中是以功能為主,但是有時候為了美觀或者其他的特殊的需求,需要對組件進(jìn)行一些變換。在Flutter中這種變換就叫做Transform。
flutter的強(qiáng)大之處在于,可以對所有的widget進(jìn)行Transform,因此可以做出非??犰诺男Ч?。
Transform簡介在Flutter中,Transform本身也是一個Widget,它主要是把變換作用在它的子widget上。我們先來看下Transform的定義和構(gòu)造函數(shù):
class Transform extends SingleChildRenderObjectWidget
const Transform({
Key? key,
required this.transform,
this.origin,
this.alignment,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : assert(transform != null),
super(key: key, child: child);
可以看到Transform需要transform,origin,alignment,transformHitTests和filterQuality這幾個屬性。
其中transform是一個Matrix4對象,它是一個4維的矩陣,用來描述child應(yīng)該怎么被transform。
origin是一個Offset對象,表示的是原始坐標(biāo)系的值,默認(rèn)是左上角。origin和transform是有關(guān)聯(lián)關(guān)系的,我們可以通過修改origin來達(dá)到不同的transform的效果。
alignment是origin的對其方式,是一個AlignmentGeometry對象。
filterQuality是在進(jìn)行圖像變換的過程中,圖像的取樣質(zhì)量。
除了上面這個默認(rèn)的構(gòu)造函數(shù)之外,為了簡單起見Transform還提供了幾個有特殊作用的構(gòu)造函數(shù):
Transform.rotate({
Key? key,
required double angle,
this.origin,
this.alignment = Alignment.center,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : transform = Matrix4.rotationZ(angle),
super(key: key, child: child);
Transform.rotate就是對子child進(jìn)行旋轉(zhuǎn)變換。
通過傳入angle屬性,實現(xiàn)子child沿Z軸旋轉(zhuǎn)。
Transform.translate({
Key? key,
required Offset offset,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : transform = Matrix4.translationValues(offset.dx, offset.dy, 0.0),
origin = null,
alignment = null,
super(key: key, child: child);
Transform.translate是通過改變offset的值來修改原始坐標(biāo)系的位置。
Transform.scale({
Key? key,
required double scale,
this.origin,
this.alignment = Alignment.center,
this.transformHitTests = true,
this.filterQuality,
Widget? child,
}) : transform = Matrix4.diagonal3Values(scale, scale, 1.0),
super(key: key, child: child);
Transform.scale通過傳入scale,來對子child進(jìn)行放大縮小。
從上面的不同構(gòu)造函數(shù)可以看出來,實際上最終都將傳入的參數(shù)轉(zhuǎn)換成為Matrix4的transform對象。
如果你對Matrix4熟悉的話,那么可以用最直接的構(gòu)造函數(shù),直接傳入Matrix4。
Transform的使用上面我們介紹了Transform.rotate,Transform.translate和Transform.scale這幾個構(gòu)造函數(shù),接下來我們將會使用具體的例子來進(jìn)行詳細(xì)的講解。
首先是Transform.rotate,用來對子組件進(jìn)行旋轉(zhuǎn),下面是一個使用的例子:
Widget build(BuildContext context) {
return Center(
child: Transform.rotate(
angle: pi/4,
child: const Icon(
Icons.airplanemode_active,
size: 200,
color: Colors.blue,
),
));
}
上面的例子將一個飛機(jī)的Icon旋轉(zhuǎn)pi/4,也就是45度,最后生成的界面如下:
接下來是Transform.translate,這個方法主要是對子組件進(jìn)行坐標(biāo)軸變換,需要傳入一個offset選項,如下所示:
return Transform.translate(
offset:const Offset(50.0, 100.0),
child: const Icon(
Icons.airplanemode_active,
size: 200,
color: Colors.blue,
),
);
上面我們還是使用了飛機(jī)的圖標(biāo),不過對他進(jìn)行了坐標(biāo)軸變換,最后得出的界面如下:
最后我們要展示的是Transform.scale,用來對子組件進(jìn)行縮放。
上面我們的圖標(biāo)size是200,我們可以將其縮放為50%,如下所示:
return Transform.scale(
scale: 0.5,
child: const Icon(
Icons.airplanemode_active,
size: 200,
color: Colors.blue,
),
);
運行我們可以得到下面的界面:
是不是變小了很多?
總結(jié)Transform是一個功能強(qiáng)大的widget,通過Transform我們可以做出很多非常有趣的效果。
本文的例子:https://github.com/ddean2009/learn-flutter.git
你是否還在尋找穩(wěn)定的海外服務(wù)器提供商?創(chuàng)新互聯(lián)www.cdcxhl.cn海外機(jī)房具備T級流量清洗系統(tǒng)配攻擊溯源,準(zhǔn)確流量調(diào)度確保服務(wù)器高可用性,企業(yè)級服務(wù)器適合批量采購,新人活動首月15元起,快前往官網(wǎng)查看詳情吧
本文題目:flutter系列之:flutter中的變形金剛Transform-創(chuàng)新互聯(lián)
鏈接分享:http://muchs.cn/article12/dhgigc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、做網(wǎng)站、域名注冊、標(biāo)簽優(yōu)化、微信小程序、網(wǎng)站設(shè)計
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容