本文對Flutter的29種布局控件進(jìn)行了總結(jié)分類，講解一些布局上的優(yōu)化策略渤涌，以及面對具體的布局時(shí)换团，如何去選擇控件。
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)動(dòng)奴饮，內(nèi)部換了部門纬向，一頓瞎忙活，也打亂了原本的分享計(jì)劃戴卜。
從我最開始接觸Flutter到現(xiàn)在逾条，差不多四個(gè)多月了。在這段時(shí)間里面叉瘩，F(xiàn)lutter也發(fā)布了Release Preview版本膳帕。各個(gè)技術(shù)網(wǎng)站本著先撥頭籌的心態(tài)，推廣了幾波薇缅，國內(nèi)的人氣跟著也起來了不少危彩。全世界Flutter開發(fā)人員中，國內(nèi)從業(yè)者占據(jù)了很大的比重泳桦，這個(gè)現(xiàn)象本身并不能說明什么汤徽，不過可以反映一點(diǎn)，有商業(yè)訴求吧灸撰。當(dāng)然觀望的還是占絕大部分谒府，除了一些個(gè)人開發(fā)者愛折騰外，也就是一些大的業(yè)務(wù)成熟到不能再成熟的團(tuán)隊(duì)浮毯，內(nèi)部消化人員去折騰這個(gè)了完疫。
插個(gè)題外話，有感于最近的工作變動(dòng)债蓝，這段時(shí)間胡思亂想的比較多壳鹤。一門技術(shù)對程序員來說到底意味著什么？如果不需要再為生計(jì)奔波饰迹，是否還會(huì)對目前已上手的技術(shù)感興趣芳誓？如果你現(xiàn)在的項(xiàng)目所需要的技術(shù)，對你個(gè)人而言毫無加成啊鸭，只會(huì)浪費(fèi)你的時(shí)間锹淌，讓你在已有的技術(shù)棧上漸行漸遠(yuǎn)，你是否還會(huì)參與這個(gè)項(xiàng)目赠制。只有極少數(shù)人會(huì)遇上逆天改命的項(xiàng)目赂摆，不管參與什么項(xiàng)目，技術(shù)人員的立身之本始終是技術(shù)（高管或者打算換行的除外）憎妙，技術(shù)的選型库正，除去時(shí)間效率后續(xù)維護(hù)等普適性的考慮要素外，排在第一位的始終應(yīng)該是對自身的提高厘唾，扯的有些遠(yuǎn)了哈褥符。
1.2 本質(zhì)
我數(shù)了一下我文章總結(jié)過的布局控件，總共有29種抚垃。乍看會(huì)覺得真雞毛的多喷楣，不乍看趟大，也會(huì)覺得雞毛的真多。為什么其他的移動(dòng)平臺沒有這么多布局控件呢铣焊？其實(shí)不然逊朽，其他平臺沒有這么細(xì)分。
以Android平臺為例曲伊，最基礎(chǔ)的幾種布局例如LinearLayout叽讳、RelativeLayout、ConstraintLayout等等坟募。很多Flutter的控件岛蚤，對于Android來說，僅僅是一個(gè)屬性的設(shè)置問題懈糯。
再往上看涤妒，iOS、Android赚哗、Web這些平臺的布局她紫，其實(shí)最基本就那幾種，線性布局屿储、絕對布局贿讹、相對布局等等。Flutter也逃不出這些够掠，那為什么Flutter現(xiàn)在有這么多布局控件呢围详？
第一點(diǎn)，之前文章介紹過的祖屏，F(xiàn)lutter的理念是
萬物皆為widget。這和Flutter的實(shí)現(xiàn)機(jī)制有關(guān)买羞，而不是因?yàn)樗诓季稚嫌惺裁刺厥庑栽祝@也是最主要的一點(diǎn)。第二點(diǎn)畜普，我覺得是因?yàn)檫@是Flutter的初期期丰，如果有經(jīng)歷過一個(gè)技術(shù)的完整發(fā)展周期，就會(huì)明白吃挑，前期只是提供各種零件钝荡，只有商業(yè)支撐或者人員支撐足夠的時(shí)候，才會(huì)去優(yōu)化零件舶衬。而現(xiàn)在就是這么一種資源不足的狀態(tài)埠通。各種組件可以合并的有很多，底層的實(shí)現(xiàn)機(jī)制不會(huì)變逛犹，只是再加一層即可端辱，這也是可以造輪子的地方梁剔，例如封裝一套適用于Android、iOS或者Web人員的控件庫等舞蔽。
第三點(diǎn)荣病，跟初期相關(guān)，一套新的技術(shù)渗柿，各種東西不可能一下子全想明白个盆，路總是走著走著才發(fā)現(xiàn)走歪了，就像一些控件朵栖，可能一些地方合適颊亮，但是一些新的地方又不太合適，所以就再造一個(gè)混槐，所以有些控件看起來功能十分相似编兄。
說了這么多，我其實(shí)就想說明一點(diǎn)声登，F(xiàn)lutter現(xiàn)在還只是處在社會(huì)發(fā)展的初級階段狠鸳，還處在溫飽問題都解決不了的狀態(tài)，想達(dá)到小康還需要很長的一段路要走悯嗓。
2. 單節(jié)點(diǎn)控件
單節(jié)點(diǎn)控件件舵，顧名思義就是只有一個(gè)節(jié)點(diǎn)的布局控件。這種控件有多少個(gè)呢脯厨，我之前文章總結(jié)過的有18種铅祸，現(xiàn)階段還是不排除增加的可能，哈哈合武。
2.1 分類
在這小節(jié)里临梗，我嘗試從多個(gè)維度去對這些控件進(jìn)行分類，希望這樣可以幫助大家理解稼跳。
2.1.1 按照繼承劃分
上面是這18種控件的父節(jié)點(diǎn)層面的繼承關(guān)系盟庞，唯一不同的一個(gè)控件就是Container。所以按照是否繼承自SingleChildRenderObjectWidget的分類如下：
- 繼承自StatelessWidget的控件汤善，有Container什猖。
- 繼承自SingleChildRenderObjectWidget的控件，有Padding红淡、Align不狮、Center、FittedBox在旱、AspectRatio摇零、ConstrainedBox、Baseline颈渊、FractionallySizedBox遂黍、IntrinsicHeight终佛、IntrinsicWidth、LimitedBox雾家、Offstage铃彰、OverflowBox、SizedBox芯咧、SizedOverflowBox牙捉、Transform、CustomSingleChildLayout敬飒。
Container是一個(gè)組合控件邪铲，不是一個(gè)基礎(chǔ)控件，這點(diǎn)從繼承關(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這么特殊了雁仲。這個(gè)特殊要從兩個(gè)層面去看仔夺。
- 對于Flutter而言，Container是特殊的攒砖，因?yàn)樗皇枪δ軉我坏目丶淄茫且粋€(gè)組合的控件日裙，所以它相對于Flutter是特殊的。
- 對于移動(dòng)端開發(fā)者而言惰蜜，它不是特殊的昂拂，因?yàn)楹芏郩I都是一些基礎(chǔ)功能組合的，這樣能讓開發(fā)者更方便的使用抛猖。
那能得出什么結(jié)論呢格侯？我個(gè)人覺得，Container這種組合的控件會(huì)越來越多财著，也會(huì)有個(gè)人開發(fā)者去開發(fā)這種通用型的組合控件联四，這是一個(gè)大趨勢，是Flutter走向易用的一小步撑教。
2.1.3 按照功能劃分
在此處我按照定位朝墩、尺寸、繪制三部分來嘗試著去做功能的劃分伟姐，當(dāng)然這個(gè)劃分并不絕對收苏，仁者見仁吧。
- 定位控件：Container玫镐、Align倒戏、Center、FittedBox恐似、Baseline杜跷、Transform。
- 尺寸控件：Container矫夷、FittedBox葛闷、AspectRatio、ConstrainedBox双藕、FractionallySizedBox淑趾、IntrinsicHeight、IntrinsicWidth忧陪、LimitedBox扣泊、SizedBox、SizedOverflowBox嘶摊。
- 繪制控件：Container延蟹、Padding、Offstage叶堆、OverflowBox阱飘、SizedOverflowBox、Transform。
有一個(gè)控件并沒有歸到這三類中沥匈，CustomSingleChildLayout可以自定義實(shí)現(xiàn)蔗喂，此處不做分類。Baseline可以把它放到繪制里面去高帖，此處我按照調(diào)節(jié)文字的位置去做分類缰儿，這個(gè)大家知道就行，并不是說只能這么劃分棋恼。
對于繪制控件返弹，其實(shí)分的有些雜，我把顯示相關(guān)的都?xì)w到這里爪飘，例如是否顯示义起、內(nèi)邊距、是否超出顯示以及變形等等师崎。
每一種大類默终，F(xiàn)lutter都提供了多種控件。經(jīng)過這么劃分犁罩，可以看出很多控件功能的交叉齐蔽，很多時(shí)候一個(gè)屬性的事情，F(xiàn)lutter還是分出了一個(gè)控件床估。
2.2 使用
單節(jié)點(diǎn)控件雖然這么多含滴，但是大部分不會(huì)挨個(gè)去嘗試。對于大部分人而言丐巫，都是佛系的用法谈况，一個(gè)控件能夠使用，就一直用到死递胧。
在布局上碑韵，大方向還是不停的拆，把一張?jiān)O(shè)計(jì)圖缎脾，拆成一棵樹祝闻，每個(gè)節(jié)點(diǎn)根據(jù)需要可很，選擇合適的控件殃饿，然后從根部開始不停嵌套侦香，布局就完成了耙厚。
2.3 控件的選擇
控件種類繁多，真正使用的時(shí)候該如何去選擇呢驹沿？有萬金油的做法混驰，不管啥都用Container昧捷，這也是很多初接觸的人經(jīng)常干的方式牲平。這么做的確可以按照設(shè)計(jì)圖把布局給實(shí)現(xiàn)了，但是會(huì)涉及到一些性能上的問題域滥。
控件的選擇纵柿，按照控件最小功能的標(biāo)準(zhǔn)去選擇蜈抓。例如需要將子節(jié)點(diǎn)居中，可以使用Container設(shè)置alignment的方式昂儒，也可以使用Center沟使。但是從功能上，Center是最小級別的渊跋，因此選擇它的話腊嗡，額外的開銷會(huì)最小。
將UI實(shí)現(xiàn)了拾酝，這只是最基本的燕少，當(dāng)達(dá)到這一步了，應(yīng)該更多的去思考蒿囤，如何更好的布局客们，使得性能更高。
3. 多節(jié)點(diǎn)控件
多節(jié)點(diǎn)控件的種類就少了一些材诽，雖然也有11種底挫，但是功能和場景多了，所以選擇上反而會(huì)簡單一些脸侥。
3.1 分類
多節(jié)點(diǎn)控件內(nèi)部實(shí)現(xiàn)比單節(jié)點(diǎn)控件復(fù)雜的多建邓，會(huì)從繼承以及功能兩個(gè)方向去做分類。
3.1.1 按照繼承劃分
從上圖可以看出睁枕，多節(jié)點(diǎn)布局控件基本上可以分為三條線
- 繼承自BoxScrollView的控件官边，有GridView以及ListView；
- 繼承自MultiChildRenderObjectWidget的控件譬重，有Row拒逮、Column、Flow臀规、Wrap滩援、Stack、IndexedStack塔嬉、ListBody玩徊、CustomMultiChildLayout八種；
- 繼承自RenderObjectWidget的控件谨究，有Table一種恩袱。
之前介紹過，GridView和ListView的實(shí)現(xiàn)都是非常相似的胶哲，基本上就是silvers只包含一個(gè)Sliver（GridView為SilverGrid畔塔、ListVIew為SliverList）的CustomScrollView。 這也是為啥這兩元素都繼承自BoxScrollView的緣故。
MultiChildRenderObjectWidget類澈吨，官方解讀如下
A superclass for RenderObjectWidgets that configure RenderObject subclasses
that have a single list of children.
它只是一個(gè)含有單一list子節(jié)點(diǎn)的控件把敢，為什么Table不需要繼承自MultiChildRenderObjectWidget呢？
這是因?yàn)門able的子節(jié)點(diǎn)是二維（橫豎）的谅辣，而MultiChildRenderObjectWidget提供的是一個(gè)一維的子節(jié)點(diǎn)管理修赞，所以必須繼承自RenderObjectWidget。知道了這些過后桑阶，對繼承關(guān)系的理解會(huì)有更好的幫助柏副。
3.1.2 按照功能劃分
這個(gè)對于多節(jié)點(diǎn)布局控件來說，還是比較難以劃分的蚣录，筆者試著做了如下劃分：
- 列表：GridView割择、ListView；
- 單列單行或者多列多行：Row包归、Column锨推、Flow、Wrap公壤、ListBody换可、Table；
- 顯示位置相關(guān)：Stack厦幅、IndexedStack沾鳄、CustomMultiChildLayout。
個(gè)人覺得這種分類方式不是特別的穩(wěn)妥确憨，但還是寫下來了译荞，請大家仁者見仁。
GridView和ListView分為一類休弃，一個(gè)是因?yàn)槠鋵?shí)現(xiàn)非常的相似吞歼，另一個(gè)原因是這兩個(gè)控件內(nèi)容區(qū)域可以無限，不像其他控件的內(nèi)容區(qū)域都是固定的塔猾，因此將這兩個(gè)劃分為一類篙骡。
關(guān)于單列單行多列多行的，也并不是說很嚴(yán)格的丈甸，Row糯俗、Column、Table睦擂、ListBody可能會(huì)遵守這種劃分得湘，F(xiàn)low以及Wrap則是近似的多列多行。這種劃分絕對不是絕對的顿仇，只是個(gè)人的一種考量劃分方式淘正。
3.2 使用
多節(jié)點(diǎn)控件種類較少摆马，而且功能重疊的很少，因此在使用上來說鸿吆，還是簡單一些今膊。比較常用的GridView、ListView伞剑、Row、Column市埋、Stack黎泣，這幾個(gè)控件基本上涵蓋了大部分的布局了。
3.3 控件的選擇
多節(jié)點(diǎn)控件功能重疊的較少缤谎，因此選擇上抒倚，不會(huì)存在太多模凌兩可的問題，需要什么使用什么即可坷澡。
4. 性能優(yōu)化
性能優(yōu)化這塊兒托呕，可能仁者見仁，并沒有一個(gè)統(tǒng)一的說法频敛，畢竟現(xiàn)在Flutter各方面都還不完善项郊。但是，大方向還是有的斟赚，盡量使用功能集更小的控件着降，這個(gè)對于渲染效率上還是有所幫助的。
4.1 優(yōu)化
在這里我試著去列舉一些拗军，并不一定都正確任洞。
- 對于單節(jié)點(diǎn)控件，如果一個(gè)布局多個(gè)控件都可以完成发侵，則使用功能最小的交掏，可以參照上面控件分類中的功能劃分來做取舍；
- 對于多節(jié)點(diǎn)控件刃鳄，如果單節(jié)點(diǎn)控件滿足需求的話盅弛，則去使用單節(jié)點(diǎn)控件進(jìn)行布局；
- 對于ListView铲汪，標(biāo)準(zhǔn)構(gòu)造函數(shù)適用于條目比較少的情況熊尉，如果條目較多的話，盡量使用ListView.builder掌腰；
- 對于GridView狰住，如果需要展示大量的數(shù)據(jù)的話，盡量使用GridView.builder齿梁；
- Flow催植、Wrap肮蛹、Row、Column四個(gè)控件创南，單純論效率的話伦忠，F(xiàn)low是最高效的，但是使用起來是最復(fù)雜的稿辙；
- 如果是單行或者單列的話昆码，Row、Column比Table更高效邻储；
- Stack和CustomMultiChildLayout如果同時(shí)滿足需求的話赋咽，CustomMultiChildLayout在某些時(shí)候效率會(huì)更高一些，但是取決于Delegate的實(shí)現(xiàn)吨娜，且使用起來更加的復(fù)雜脓匿；
上面所列的比較雜，但是歸納起來宦赠，無非這幾點(diǎn)：
- 功能越少的控件陪毡，效率越高；
- ListView以及GridView的builder構(gòu)造函數(shù)效率更高勾扭；
- 實(shí)現(xiàn)起來比較復(fù)雜的控件毡琉，效率一般會(huì)更高。
4.2 選擇
控件的選擇尺借，個(gè)人覺得把握大方向就夠了绊起。如果時(shí)間緊急，以實(shí)現(xiàn)效率最優(yōu)先燎斩，如果時(shí)間充裕的話虱歪，可以按照一些優(yōu)化細(xì)則，去做一些選擇栅表。單純控件層面笋鄙，帶來性能上的改進(jìn)畢竟十分有限。
5. 實(shí)戰(zhàn)
首先看一下實(shí)際的效果圖怪瓶，這個(gè)是之前做工程中萧落，比較復(fù)雜的一個(gè)界面吧，就算放到native上看洗贰，也是比較復(fù)雜的找岖。
這個(gè)頁面中有不少自定義控件，例如日期選擇敛滋、進(jìn)度等许布。整體看著復(fù)雜，實(shí)現(xiàn)起來其實(shí)也還好绎晃。關(guān)于如何布局拆解蜜唾，之前文章有過介紹杂曲，在這里不再闡述，訣竅就是一個(gè)字----拆袁余。
5.1 關(guān)于自定義控件
自定義控件一般都是繼承自StatelessWidget擎勘、StatefulWidget。也有一些特殊的颖榜，例如上面的進(jìn)度控件棚饵，直接使用Canvas畫的。
對于需要更新狀態(tài)的掩完，一般都是繼承自StatefulWidget蟹地，對于不需要更新狀態(tài)的，使用StatelessWidget即可藤为，能夠使用StatelessWidget的時(shí)候，也盡量使用它夺刑，StatefulWidget在頁面更新的時(shí)候缅疟，會(huì)存在額外的開銷。
Flutter的自定義控件遍愿，寫起來可能會(huì)比原生的更簡單存淫，它更多的是一些基礎(chǔ)控件的組合使用，而很少涉及到底層的一些重寫沼填。
5.2 關(guān)于生命周期
這是很蛋疼的一個(gè)問題桅咆，一個(gè)純Flutter的App，類似于Android中的單Activity應(yīng)用坞笙。某個(gè)具體的頁面就算去監(jiān)聽native層的生命周期岩饼，也僅僅是獲取到base activity的，而無法獲取到頁面層級的薛夜。
5.3 感想
Flutter如果輪子足夠的話籍茧，還是非常吸引人的，在熟悉了這些基礎(chǔ)組件過后梯澜，編寫起來寞冯，速度會(huì)非常快晚伙。自定義控件的實(shí)現(xiàn)吮龄，也比較簡單。但是咆疗，性能方面漓帚，還是存在比較大的問題，復(fù)雜頁面首次載入民傻，速度還是比較慢胰默。對于高端機(jī)型來說场斑，整體流暢度很不錯(cuò)，堪比原生的app牵署，低端機(jī)型漏隐，表現(xiàn)就比較捉急吧。整體來說奴迅，F(xiàn)lutter表現(xiàn)還是挺不錯(cuò)的青责，可以上手試試，把玩把玩吧取具。就是寫起來脖隶，寫著寫著就覺得惡心，是真的惡心的那種惡心暇检，看著各種嵌套標(biāo)簽产阱，感覺被降維成了web開發(fā)。
近期看到一些基于Flutter的自動(dòng)布局解決方案块仆，之前也有想過构蹬，完全可以基于Flutter做出布局的工具，僅僅是拖拽就可以實(shí)現(xiàn)完成度非常高的布局頁面悔据。也得益于Flutter本身的思想和實(shí)現(xiàn)機(jī)制庄敛，web方面的很多東西，個(gè)人覺得都可以借鑒到Flutter上科汗。單純從UI層來說藻烤，F(xiàn)lutter確實(shí)有自己獨(dú)特的地方。如果Flutter在最開始头滔，就僅僅是一套跨平臺的UI的話怖亭，可能更容易被人們接受吧。
前幾天看了官方的camera插件坤检，還是挺蛋疼的依许，對于國內(nèi)的Android端來說，直接拿來商用幾乎是不可能的缀蹄。插件基于camera2去實(shí)現(xiàn)峭跳，國內(nèi)大部分廠商對于camera2的支持很差，一些很容易復(fù)現(xiàn)的crash也沒有去解決缺前。
如果決定在現(xiàn)有項(xiàng)目中使用Flutter蛀醉，則需要做好埋坑造輪子的覺悟。如果人力緊缺的話衅码，不應(yīng)該在這上面去投入拯刁，人力富余的時(shí)候，可以投入人力跟進(jìn)研究逝段，讓業(yè)界覺得你們很棒很前沿垛玻。
6. 后話
筆者建了一個(gè)Flutter學(xué)習(xí)相關(guān)的項(xiàng)目割捅，Github地址，里面包含了筆者寫的關(guān)于Flutter學(xué)習(xí)相關(guān)的一些文章帚桩，會(huì)定期更新亿驾，也會(huì)上傳一些學(xué)習(xí)Demo，歡迎大家關(guān)注账嚎。
