本文對Flutter的29種布局控件進行了總結(jié)分類茶袒，講解一些布局上的優(yōu)化策略吏颖，以及面對具體的布局時序芦，如何去選擇控件吞彤。
轉(zhuǎn)自 yang7229693
1. 系列文章
- Flutter 布局詳解
- Flutter 布局（一）- Container詳解
- Flutter 布局（二）- Padding丁恭、Align曹动、Center詳解
- Flutter 布局（三）- FittedBox、AspectRatio牲览、ConstrainedBox詳解
- Flutter 布局（四）- Baseline墓陈、FractionallySizedBox、IntrinsicHeight第献、IntrinsicWidth詳解
- Flutter 布局（五）- LimitedBox贡必、Offstage、OverflowBox庸毫、SizedBox詳解
- Flutter 布局（六）- SizedOverflowBox仔拟、Transform、CustomSingleChildLayout詳解
- Flutter 布局（七）- Row飒赃、Column詳解
- Flutter 布局（八）- Stack利花、IndexedStack、GridView詳解
- Flutter 布局（九）- Flow载佳、Table炒事、Wrap詳解
- Flutter 布局（十）- ListBody、ListView蔫慧、CustomMultiChildLayout詳解
1.1 亂侃
前前后后也算是拖拖拉拉的寫了一些Flutter的文章挠乳，寫的也都比較粗略。最近工作調(diào)動姑躲，內(nèi)部換了部門睡扬，一頓瞎忙活，也打亂了原本的分享計劃黍析。
從我最開始接觸Flutter到現(xiàn)在威蕉，差不多四個多月了。在這段時間里面橄仍，F(xiàn)lutter也發(fā)布了Release Preview版本韧涨。各個技術(shù)網(wǎng)站本著先撥頭籌的心態(tài)牍戚，推廣了幾波，國內(nèi)的人氣跟著也起來了不少虑粥。全世界Flutter開發(fā)人員中如孝，國內(nèi)從業(yè)者占據(jù)了很大的比重，這個現(xiàn)象本身并不能說明什么娩贷，不過可以反映一點第晰，有商業(yè)訴求吧。當然觀望的還是占絕大部分彬祖，除了一些個人開發(fā)者愛折騰外茁瘦，也就是一些大的業(yè)務(wù)成熟到不能再成熟的團隊，內(nèi)部消化人員去折騰這個了储笑。
插個題外話甜熔，有感于最近的工作變動，這段時間胡思亂想的比較多突倍。一門技術(shù)對程序員來說到底意味著什么腔稀？如果不需要再為生計奔波，是否還會對目前已上手的技術(shù)感興趣羽历？如果你現(xiàn)在的項目所需要的技術(shù)焊虏，對你個人而言毫無加成，只會浪費你的時間秕磷，讓你在已有的技術(shù)棧上漸行漸遠诵闭，你是否還會參與這個項目。只有極少數(shù)人會遇上逆天改命的項目澎嚣，不管參與什么項目涂圆，技術(shù)人員的立身之本始終是技術(shù)（高管或者打算換行的除外），技術(shù)的選型币叹，除去時間效率后續(xù)維護等普適性的考慮要素外润歉，排在第一位的始終應(yīng)該是對自身的提高，扯的有些遠了哈颈抚。
1.2 本質(zhì)
我數(shù)了一下我文章總結(jié)過的布局控件踩衩，總共有29種。乍看會覺得真雞毛的多贩汉，不乍看驱富，也會覺得雞毛的真多。為什么其他的移動平臺沒有這么多布局控件呢匹舞？其實不然褐鸥，其他平臺沒有這么細分。
以Android平臺為例赐稽，最基礎(chǔ)的幾種布局例如LinearLayout叫榕、RelativeLayout浑侥、ConstraintLayout等等。很多Flutter的控件晰绎，對于Android來說寓落，僅僅是一個屬性的設(shè)置問題。
再往上看荞下，iOS伶选、Android、Web這些平臺的布局尖昏，其實最基本就那幾種仰税，線性布局、絕對布局抽诉、相對布局等等陨簇。Flutter也逃不出這些，那為什么Flutter現(xiàn)在有這么多布局控件呢掸鹅？
第一點塞帐，之前文章介紹過的拦赠，F(xiàn)lutter的理念是
萬物皆為widget巍沙。這和Flutter的實現(xiàn)機制有關(guān)，而不是因為它在布局上有什么特殊性荷鼠，這也是最主要的一點句携。第二點允乐，我覺得是因為這是Flutter的初期，如果有經(jīng)歷過一個技術(shù)的完整發(fā)展周期牍疏，就會明白，前期只是提供各種零件鳞陨，只有商業(yè)支撐或者人員支撐足夠的時候，才會去優(yōu)化零件厦滤。而現(xiàn)在就是這么一種資源不足的狀態(tài)。各種組件可以合并的有很多掏导，底層的實現(xiàn)機制不會變，只是再加一層即可趟咆，這也是可以造輪子的地方梅屉，例如封裝一套適用于Android仰坦、iOS或者Web人員的控件庫等。
第三點悄晃，跟初期相關(guān)，一套新的技術(shù)妈橄，各種東西不可能一下子全想明白，路總是走著走著才發(fā)現(xiàn)走歪了眷蚓，就像一些控件，可能一些地方合適沙热，但是一些新的地方又不太合適叉钥，所以就再造一個，所以有些控件看起來功能十分相似篙贸。
說了這么多投队，我其實就想說明一點，F(xiàn)lutter現(xiàn)在還只是處在社會發(fā)展的初級階段爵川，還處在溫飽問題都解決不了的狀態(tài)敷鸦，想達到小康還需要很長的一段路要走。
2. 單節(jié)點控件
單節(jié)點控件寝贡，顧名思義就是只有一個節(jié)點的布局控件扒披。這種控件有多少個呢，我之前文章總結(jié)過的有18種圃泡，現(xiàn)階段還是不排除增加的可能碟案，哈哈。
2.1 分類
在這小節(jié)里颇蜡，我嘗試從多個維度去對這些控件進行分類价说，希望這樣可以幫助大家理解。
2.1.1 按照繼承劃分
上面是這18種控件的父節(jié)點層面的繼承關(guān)系澡匪，唯一不同的一個控件就是Container熔任。所以按照是否繼承自SingleChildRenderObjectWidget的分類如下：
- 繼承自StatelessWidget的控件，有Container唁情。
- 繼承自SingleChildRenderObjectWidget的控件疑苔，有Padding、Align甸鸟、Center惦费、FittedBox兵迅、AspectRatio、ConstrainedBox薪贫、Baseline恍箭、FractionallySizedBox、IntrinsicHeight瞧省、IntrinsicWidth扯夭、LimitedBox、Offstage交洗、OverflowBox橡淑、SizedBox、SizedOverflowBox置森、Transform符糊、CustomSingleChildLayout濒蒋。
Container是一個組合控件把兔，不是一個基礎(chǔ)控件县好，這點從繼承關(guān)系就可以看出來。
2.1.2 按照功能是否單一劃分
分類如下：
- 功能不單一的控件翁授，Container收擦、Transform谍倦、FittedBox、SizedOverflowBox宴猾。
- 功能單一的控件，有Padding沦辙、Align油讯、Center延欠、AspectRatio衫冻、ConstrainedBox、Baseline邻奠、FractionallySizedBox碌宴、IntrinsicHeight蒙畴、IntrinsicWidth、LimitedBox碑隆、Offstage上煤、OverflowBox劫狠、SizedBox永部、CustomSingleChildLayout。
先在此處小結(jié)一下懦砂，可以看出Container的特殊之處了吧孕惜，為什么Container這么特殊了衫画。這個特殊要從兩個層面去看。
- 對于Flutter而言瞄勾，Container是特殊的进陡，因為它不是功能單一的控件微服，是一個組合的控件以蕴，所以它相對于Flutter是特殊的。
- 對于移動端開發(fā)者而言赡磅，它不是特殊的焚廊，因為很多UI都是一些基礎(chǔ)功能組合的习劫，這樣能讓開發(fā)者更方便的使用榜聂。
那能得出什么結(jié)論呢嗓蘑？我個人覺得桩皿，Container這種組合的控件會越來越多，也會有個人開發(fā)者去開發(fā)這種通用型的組合控件拒贱，這是一個大趨勢逻澳，是Flutter走向易用的一小步。
2.1.3 按照功能劃分
在此處我按照定位苞氮、尺寸笼吟、繪制三部分來嘗試著去做功能的劃分霸旗，當然這個劃分并不絕對诱告，仁者見仁吧。
- 定位控件：Container诲侮、Align沟绪、Center空猜、FittedBox辈毯、Baseline、Transform钝凶。
- 尺寸控件：Container耕陷、FittedBox据沈、AspectRatio锌介、ConstrainedBox猾警、FractionallySizedBox发皿、IntrinsicHeight雳窟、IntrinsicWidth匣屡、LimitedBox捣作、SizedBox、SizedOverflowBox惩坑。
- 繪制控件：Container以舒、Padding慢哈、Offstage卵贱、OverflowBox、SizedOverflowBox兰绣、Transform缀辩。
有一個控件并沒有歸到這三類中臀玄，CustomSingleChildLayout可以自定義實現(xiàn)杯瞻，此處不做分類。Baseline可以把它放到繪制里面去，此處我按照調(diào)節(jié)文字的位置去做分類旗唁，這個大家知道就行，并不是說只能這么劃分讶请。
對于繪制控件夺溢，其實分的有些雜风响，我把顯示相關(guān)的都歸到這里丹禀，例如是否顯示、內(nèi)邊距持搜、是否超出顯示以及變形等等葫盼。
每一種大類剪返，F(xiàn)lutter都提供了多種控件邓梅。經(jīng)過這么劃分日缨，可以看出很多控件功能的交叉，很多時候一個屬性的事情面哥，F(xiàn)lutter還是分出了一個控件尚卫。
2.2 使用
單節(jié)點控件雖然這么多吱涉，但是大部分不會挨個去嘗試。對于大部分人而言特石，都是佛系的用法鳖链，一個控件能夠使用芙委，就一直用到死。
在布局上推捐，大方向還是不停的拆玖姑，把一張設(shè)計圖慨菱，拆成一棵樹符喝，每個節(jié)點根據(jù)需要，選擇合適的控件畏腕，然后從根部開始不停嵌套描馅，布局就完成了而线。
2.3 控件的選擇
控件種類繁多膀篮，真正使用的時候該如何去選擇呢？有萬金油的做法磅网，不管啥都用Container涧偷，這也是很多初接觸的人經(jīng)常干的方式。這么做的確可以按照設(shè)計圖把布局給實現(xiàn)了嫂丙，但是會涉及到一些性能上的問題规哲。
控件的選擇，按照控件最小功能的標準去選擇隅肥。例如需要將子節(jié)點居中袄简，可以使用Container設(shè)置alignment的方式绿语，也可以使用Center。但是從功能上种柑，Center是最小級別的聚请，因此選擇它的話稳其，額外的開銷會最小既鞠。
將UI實現(xiàn)了，這只是最基本的蚯姆，當達到這一步了蒋失，應(yīng)該更多的去思考桐玻，如何更好的布局镊靴，使得性能更高链韭。
3. 多節(jié)點控件
多節(jié)點控件的種類就少了一些敞峭，雖然也有11種旋讹，但是功能和場景多了沉迹，所以選擇上反而會簡單一些害驹。
3.1 分類
多節(jié)點控件內(nèi)部實現(xiàn)比單節(jié)點控件復雜的多宛官，會從繼承以及功能兩個方向去做分類。
3.1.1 按照繼承劃分
從上圖可以看出腋么，多節(jié)點布局控件基本上可以分為三條線
- 繼承自BoxScrollView的控件党晋，有GridView以及ListView未玻；
- 繼承自MultiChildRenderObjectWidget的控件胡控，有Row昼激、Column、Flow瞧掺、Wrap辟狈、Stack、IndexedStack明未、ListBody趟妥、CustomMultiChildLayout八種佣蓉；
- 繼承自RenderObjectWidget的控件偏螺，有Table一種匆光。
之前介紹過终息，GridView和ListView的實現(xiàn)都是非常相似的，基本上就是silvers只包含一個Sliver（GridView為SilverGrid柳譬、ListVIew為SliverList）的CustomScrollView美澳。 這也是為啥這兩元素都繼承自BoxScrollView的緣故摸航。
MultiChildRenderObjectWidget類酱虎，官方解讀如下
A superclass for RenderObjectWidgets that configure RenderObject subclasses
that have a single list of children.
它只是一個含有單一list子節(jié)點的控件，為什么Table不需要繼承自MultiChildRenderObjectWidget呢聊记？
這是因為Table的子節(jié)點是二維（橫豎）的排监，而MultiChildRenderObjectWidget提供的是一個一維的子節(jié)點管理舆床，所以必須繼承自RenderObjectWidget琼娘。知道了這些過后，對繼承關(guān)系的理解會有更好的幫助瞒瘸。
3.1.2 按照功能劃分
這個對于多節(jié)點布局控件來說，還是比較難以劃分的省撑，筆者試著做了如下劃分：
- 列表：GridView竟秫、ListView肥败；
- 單列單行或者多列多行：Row愕提、Column、Flow纽谒、Wrap鼓黔、ListBody不见、Table脖祈；
- 顯示位置相關(guān)：Stack、IndexedStack慎陵、CustomMultiChildLayout席纽。
個人覺得這種分類方式不是特別的穩(wěn)妥润梯，但還是寫下來了，請大家仁者見仁寇钉。
GridView和ListView分為一類扫倡，一個是因為其實現(xiàn)非常的相似竟纳，另一個原因是這兩個控件內(nèi)容區(qū)域可以無限锥累，不像其他控件的內(nèi)容區(qū)域都是固定的，因此將這兩個劃分為一類语淘。
關(guān)于單列單行多列多行的亏娜，也并不是說很嚴格的蹬挺，Row巴帮、Column榕茧、Table用押、ListBody可能會遵守這種劃分靶剑，F(xiàn)low以及Wrap則是近似的多列多行。這種劃分絕對不是絕對的缎讼，只是個人的一種考量劃分方式血崭。
3.2 使用
多節(jié)點控件種類較少夹纫，而且功能重疊的很少，因此在使用上來說忱详，還是簡單一些匈睁。比較常用的GridView桶错、ListView院刁、Row、Column任岸、Stack享潜，這幾個控件基本上涵蓋了大部分的布局了嗅蔬。
3.3 控件的選擇
多節(jié)點控件功能重疊的較少澜术，因此選擇上，不會存在太多模凌兩可的問題猜敢，需要什么使用什么即可缩擂。
4. 性能優(yōu)化
性能優(yōu)化這塊兒兰英，可能仁者見仁畦贸，并沒有一個統(tǒng)一的說法楞捂，畢竟現(xiàn)在Flutter各方面都還不完善寨闹。但是繁堡，大方向還是有的椭蹄，盡量使用功能集更小的控件净赴，這個對于渲染效率上還是有所幫助的。
4.1 優(yōu)化
在這里我試著去列舉一些翼馆，并不一定都正確应媚。
- 對于單節(jié)點控件中姜，如果一個布局多個控件都可以完成魔吐，則使用功能最小的酬姆，可以參照上面控件分類中的功能劃分來做取舍辞色；
- 對于多節(jié)點控件浮定，如果單節(jié)點控件滿足需求的話桦卒，則去使用單節(jié)點控件進行布局；
- 對于ListView建蹄，標準構(gòu)造函數(shù)適用于條目比較少的情況，如果條目較多的話痛单，盡量使用ListView.builder旭绒；
- 對于GridView焦人，如果需要展示大量的數(shù)據(jù)的話花椭，盡量使用GridView.builder；
- Flow脉幢、Wrap嗦锐、Row奕污、Column四個控件，單純論效率的話贾陷，F(xiàn)low是最高效的嘱根，但是使用起來是最復雜的；
- 如果是單行或者單列的話慌洪，Row冈爹、Column比Table更高效欧引；
- Stack和CustomMultiChildLayout如果同時滿足需求的話，CustomMultiChildLayout在某些時候效率會更高一些憋肖，但是取決于Delegate的實現(xiàn)，且使用起來更加的復雜婚肆；
上面所列的比較雜坐慰，但是歸納起來结胀，無非這幾點：
- 功能越少的控件，效率越高攀操；
- ListView以及GridView的builder構(gòu)造函數(shù)效率更高速和；
- 實現(xiàn)起來比較復雜的控件剥汤，效率一般會更高吭敢。
4.2 選擇
控件的選擇，個人覺得把握大方向就夠了欲低。如果時間緊急畜晰，以實現(xiàn)效率最優(yōu)先凄鼻，如果時間充裕的話，可以按照一些優(yōu)化細則，去做一些選擇魔策。單純控件層面闯袒，帶來性能上的改進畢竟十分有限。
5. 實戰(zhàn)
首先看一下實際的效果圖其徙，這個是之前做工程中唾那，比較復雜的一個界面吧，就算放到native上看期犬，也是比較復雜的避诽。
這個頁面中有不少自定義控件，例如日期選擇沙庐、進度等拱雏。整體看著復雜古涧，實現(xiàn)起來其實也還好。關(guān)于如何布局拆解羡滑，之前文章有過介紹，在這里不再闡述凳宙，訣竅就是一個字----拆氏涩。
5.1 關(guān)于自定義控件
自定義控件一般都是繼承自StatelessWidget有梆、StatefulWidget泥耀。也有一些特殊的，例如上面的進度控件兜辞，直接使用Canvas畫的。
對于需要更新狀態(tài)的凶硅，一般都是繼承自StatefulWidget足绅，對于不需要更新狀態(tài)的啸罢，使用StatelessWidget即可扰才，能夠使用StatelessWidget的時候衩匣，也盡量使用它，StatefulWidget在頁面更新的時候生百，會存在額外的開銷蚀浆。
Flutter的自定義控件市俊，寫起來可能會比原生的更簡單滤奈，它更多的是一些基礎(chǔ)控件的組合使用蜒程，而很少涉及到底層的一些重寫。
5.2 關(guān)于生命周期
這是很蛋疼的一個問題忌锯，一個純Flutter的App汉规，類似于Android中的單Activity應(yīng)用。某個具體的頁面就算去監(jiān)聽native層的生命周期，也僅僅是獲取到base activity的啄枕，而無法獲取到頁面層級的族沃。
5.3 感想
Flutter如果輪子足夠的話脆淹，還是非常吸引人的盖溺，在熟悉了這些基礎(chǔ)組件過后烘嘱，編寫起來蝇庭，速度會非诚冢快。自定義控件的實現(xiàn)纹因，也比較簡單辐怕。但是从绘，性能方面陕截，還是存在比較大的問題农曲，復雜頁面首次載入，速度還是比較慢形葬。對于高端機型來說笙以，整體流暢度很不錯猖腕，堪比原生的app倘感，低端機型老玛，表現(xiàn)就比較捉急吧逻炊。整體來說余素，F(xiàn)lutter表現(xiàn)還是挺不錯的桨吊，可以上手試試视乐，把玩把玩吧佑淀。就是寫起來，寫著寫著就覺得惡心逢倍，是真的惡心的那種惡心捧颅，看著各種嵌套標簽，感覺被降維成了web開發(fā)较雕。
近期看到一些基于Flutter的自動布局解決方案碉哑，之前也有想過，完全可以基于Flutter做出布局的工具，僅僅是拖拽就可以實現(xiàn)完成度非常高的布局頁面扣典。也得益于Flutter本身的思想和實現(xiàn)機制妆毕，web方面的很多東西，個人覺得都可以借鑒到Flutter上激捏。單純從UI層來說设塔，F(xiàn)lutter確實有自己獨特的地方。如果Flutter在最開始远舅，就僅僅是一套跨平臺的UI的話，可能更容易被人們接受吧蚤吹。
前幾天看了官方的camera插件，還是挺蛋疼的，對于國內(nèi)的Android端來說桶雀，直接拿來商用幾乎是不可能的。插件基于camera2去實現(xiàn)，國內(nèi)大部分廠商對于camera2的支持很差乍恐，一些很容易復現(xiàn)的crash也沒有去解決邑彪。
如果決定在現(xiàn)有項目中使用Flutter矩动，則需要做好埋坑造輪子的覺悟。如果人力緊缺的話示姿，不應(yīng)該在這上面去投入难裆，人力富余的時候，可以投入人力跟進研究，讓業(yè)界覺得你們很棒很前沿驶冒。
6. 后話
筆者建了一個Flutter學習相關(guān)的項目，Github地址，里面包含了筆者寫的關(guān)于Flutter學習相關(guān)的一些文章屋厘，會定期更新，也會上傳一些學習Demo瞻凤，歡迎大家關(guān)注。
