Flutter中尺寸限制類容器組件包括ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、LimitedBox、Container。這些組件可以約束子組件的尺寸,下面一一介紹。
專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)巴林右旗免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都,凝聚了一批互聯(lián)網(wǎng)行業(yè)人才,有力地推動了成百上千企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
ConstrainedBox組件約束子組件的最大寬高和最小寬高,假如一個組件寬高都是300,包裹在ConstrainedBox中,并給ConstrainedBox添加最大寬高約束,用法如下:
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
child: Container(height: 300, width: 300, color: Colors.red),
)
這時子組件是無法突破BoxConstraints設(shè)置的最大寬高,效果如下:
BoxConstraints的默認(rèn)值如下:
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity, //無限大
this.minHeight = 0.0,
this.maxHeight = double.infinity, //無限大
});
BoxConstraints提供了便捷的構(gòu)建函數(shù),方便開發(fā)者調(diào)用,如BoxConstraints.tight(Size size)
和BoxConstraints.expand()
等。
如果BoxConstraints嵌套使用,有2個ConstrainedBox,如下:
ConstrainedBox(
constraints: BoxConstraints(maxHeight: 60, maxWidth: 200),
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: 100, maxWidth: 240),
child: Container(height: 300, width: 300, color: Colors.red),
),
)
以最大寬為例,第一個BoxConstraints的maxHeight
值是60,也就是約束其子控件最大高是60,第二個BoxConstraints的maxHeight
值是100,由于第二個BoxConstraints也受第一個的約束,所以第二個BoxConstraints最大高也只能是60,最終子組件的最大高是60,同理最大寬是200,因此多級BoxConstraints嵌套約束最大值最終值等于多個BoxConstraints約束中的最小值。同理嵌套約束最小值等于多個BoxConstraints約束中的最大值。
UnconstrainedBox組件不對子組件做任何約束,比如有一個父組件大小是200x200,子組件是UnconstrainedBox,UnconstrainedBox包裹一個300x300的組件,代碼如下:
Container(
height: 200,
width: 200,
child: UnconstrainedBox(
child: Container(height: 300, width: 300, color: Colors.red),
),
)
效果如下:
注意:黃色區(qū)域表示子控件超出父控件的區(qū)域了,黃色區(qū)域只會在debug模式下存在,在release模式下,只有紅色區(qū)域。
UnconstrainedBox雖然不限制其子控件的大小,但仍然受父控件的約束,超出父控件的區(qū)域?qū)厝 ?/p>
UnconstrainedBox允許設(shè)置對齊方式,用法如下:
UnconstrainedBox(
alignment: Alignment.topLeft,
...
)
效果如下:
和上一個圖對比,這次左邊和上邊沒有超出區(qū)域,右邊和下邊各超出100px。
SizedBox是具有固定寬高的組件,直接指定具體的寬高,用法如下:
SizedBox(
height: 60,
width: 200,
child: RaisedButton(
child: Text('this is SizedBox'),
),
)
我們也可以設(shè)置尺寸無限大,如下:
SizedBox(
height: double.infinity,
width: double.infinity,
...
)
雖然設(shè)置了無限大,子控件是否會無限長呢?不,不會,子控件依然會受到父組件的約束,會擴展到父組件的尺寸,還有一個便捷的方式設(shè)置此方式:
SizedBox.expand(
child: RaisedButton(
child: Text('this is SizedBox'),
),
)
SizedBox可以沒有子組件,但仍然會占用空間,所以SizedBox非常適合控制2個組件之間的空隙,用法如下:
Column(
children: <Widget>[
Container(height: 30,),
SizedBox(height: 10,),
Container(height: 30,),
],
)
AspectRatio組件是固定寬高比的組件,如果組件的寬度固定,希望高是寬的1/2,可以用AspectRatio實現(xiàn)此效果,用法如下:
AspectRatio(
aspectRatio: 2 / 1,
child: Container(color: Colors.red),
)
aspectRatio
參數(shù)是寬高比,可以直接寫成分?jǐn)?shù)的形式,也可以寫成小數(shù)的形式,但建議寫成分?jǐn)?shù)的形式,可讀性更高。效果如下:
當(dāng)我們需要一個控件的尺寸是相對尺寸時,比如當(dāng)前按鈕的寬度占父組件的70%,可以使用FractionallySizedBox來實現(xiàn)此效果。
使用FractionallySizedBox包裹子控件,設(shè)置widthFactor
寬度系數(shù)或者heightFactor
高度系數(shù),系數(shù)值的范圍是0-1,0.7表示占父組件的70%,用法如下:
FractionallySizedBox(
widthFactor: .7,
child: RaisedButton(
child: Text('button'),
),
)
通過alignment
參數(shù)控制子組件顯示的位置,默認(rèn)為center
,用法如下:
FractionallySizedBox(
alignment: Alignment.centerLeft,
...
)
如果想讓2個控件之間的間隔是當(dāng)前父控件的10%,可以使用無子控件的FractionallySizedBox,用法如下:
Container(
height: 200,
color: Colors.grey,
child: Column(
children: <Widget>[
Container(
height: 50,
color: Colors.red,
),
Flexible(
child: FractionallySizedBox(
heightFactor: .1,
),
),
Container(
height: 50,
color: Colors.blue,
),
],
),
)
效果如下:
LimitedBox組件是當(dāng)不受父組件約束時限制它的尺寸,什么叫不受父組件約束?就像這篇文章介紹的其他組件,它們都會對子組件約束,沒有約束的父組件有ListView、Row、Column等,如果LimitedBox的父組件受到約束,此時LimitedBox將會不做任何操作,我們可以認(rèn)為沒有這個組件,代碼如下:
Container(
height: 100,
width: 100,
child: LimitedBox(
maxHeight: 50,
maxWidth: 100,
child: Container(color: Colors.green,),
),
)
效果如下:
LimitedBox設(shè)置的寬高不是正方形,此時效果時正方形,說明LimitedBox沒有起作用。
在ListView中直接添加Container組件,如下:
ListView(
children: <Widget>[
Container(
color: Colors.green,
),
Container(
color: Colors.red,
),
],
)
這時你會發(fā)現(xiàn)什么也沒有,因為在容器不受約束時,大小將會設(shè)置0,只需將Container包裹在LimitedBox中即可:
ListView(
children: <Widget>[
LimitedBox(
maxHeight: 100,
child: Container(
color: Colors.green,
),
),
LimitedBox(
maxHeight: 100,
child: Container(
color: Colors.red,
),
),
],
)
效果:
Container組件應(yīng)該是最常用的組件之一,Container組件可以直接設(shè)置其寬高,用法如下:
Container(
height: 100,
width: 100,
...
)
Container組件是這些組件里面屬性最多的一個,當(dāng)然也是用法最復(fù)雜的一個,這里重點介紹Container對子組件的約束,我在前面的文章中已經(jīng)詳細(xì)的介紹了Container,這里不在介紹,奉上跳轉(zhuǎn)地址:https://blog.csdn.net/mengks1987/article/details/104388393
當(dāng)前標(biāo)題:?Flutter中尺寸限制類容器介紹
網(wǎng)站URL:http://bm7419.com/article30/pphjpo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、小程序開發(fā)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站制作、App設(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)