層疊布局

Flutter中使用Stack和Positioned這兩個(gè)組件來(lái)配合實(shí)現(xiàn)絕對(duì)定位。Stack允許子組件堆疊,而Positioned用于根據(jù)Stack的四個(gè)角來(lái)確定子組件的位置。

Stack

定義如下:

Stack({

? this.alignment = AlignmentDirectional.topStart,

? this.textDirection,

? this.fit = StackFit.loose,

? this.overflow = Overflow.clip,

? List<Widget> children = const <Widget>[],

})

alignment:此參數(shù)決定如何去對(duì)齊沒(méi)有定位或部分定位的子組件。所謂部分定位,在這里特指沒(méi)有在某一個(gè)軸上定位:left、right為橫軸,top、bottom為縱軸,只要包含某個(gè)軸上的一個(gè)定位屬性就算在該軸上有定位。

textDirection:和Row、Wrap的textDirection功能一樣,都用于確定alignment對(duì)齊的參考系,即:textDirection的值為TextDirection.ltr,則alignment的start代表左,end代表右,即從左往右的順序;textDirection的值為TextDirection.rtl,則alignment的start代表右,end代表左,即從右往左的順序。

fit:此參數(shù)用于確定沒(méi)有定位的子組件如何去適應(yīng)Stack的大小。StackFit.loose表示使用子組件的大小,StackFit.expand表示擴(kuò)伸到Stack的大小。

overflow:此屬性決定如何顯示超出Stack顯示空間的子組件;值為Overflow.clip時(shí),超出部分會(huì)被剪裁,值為Overflow.visible 時(shí)則不會(huì)。

Positioned

定義如下:

const Positioned({

? Key key,

? this.left,

? this.top,

? this.right,

? this.bottom,

? this.width,

? this.height,

? @required Widget child,

})

left、top 、right、 bottom分別代表離Stack左、上、右、底四邊的距離。width和height用于指定需要定位元素的寬度和高度。注意,Positioned的width、height 和其它地方的意義稍微有點(diǎn)區(qū)別,此處用于配合left、top 、right、 bottom來(lái)定位組件,舉個(gè)例子,在水平方向時(shí),你只能指定left、right、width三個(gè)屬性中的兩個(gè),如指定left和width后,right會(huì)自動(dòng)算出(left+width),如果同時(shí)指定三個(gè)屬性則會(huì)報(bào)錯(cuò),垂直方向同理。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容