Flutter自定義佈局-CustomMultiChildLayout

wangfeng6075發表於2021-04-04

有時候我們需要實現類似下圖的佈局,有的同學可能想到用Stack + Position 來實現,這種方式確實可以,不過今天要說的主角是另外一種佈局方式:CustomMultiChildLayout,我們來看看這個Widget怎麼用吧

img1.png

CustomMultiChildLayout建構函式有兩個屬性,children 和 delegate

img2.png

children 是我們要放的子元素,但是這些子元素要用LayoutId 包裝一下,並且給子元素指定一個Id,其實就是一個唯一的標識,這個Id可以是任意型別,並且在佈局的時候需要用到;代理是一個抽象類,我們需要寫一個類繼承MultiChildLayoutDelegate,並實現代理中的方法,performLayout是用來佈局的方法,shouldRelayout是告訴代理什麼時候需要重新整理,我們在performLayout中調layoutChild計算出子元素的size,然後用positionChild方法完成佈局

img3.png 我這裡又定義了一個繼承自CustomMultiChildLayout的類:MyCustomMultiChildLayout,為的是拿到元素的id,並將id傳到delegate中

img4.png

img5.png 一個基於CustomMultiChildLayout的自定義佈局就弄好了。

相關文章