文章目錄

前言

轉(zhuǎn)變思維

命令式

聲明式

結(jié)論

總結(jié)

前言

Flutter 近兩年在江湖上崛起的非常迅猛，業(yè)已成為移動(dòng)開(kāi)發(fā)中不的不重視的一股力量。如果你是一個(gè)有追求的IOS/Android程序員，我想你非常有必要嘗試一下。

我接觸Android開(kāi)發(fā)也有幾年了，前段時(shí)間公司大力推廣Flutter技術(shù)，所以有幸嘗試了一下。本人一直信奉善于總結(jié)是不斷進(jìn)步的不二法寶，這樣你才能不斷的超越同行，不被裁員，所以在此準(zhǔn)備以切身體驗(yàn)提供一些快速掌握Flutter的一些技巧。

轉(zhuǎn)變思維

其實(shí)移動(dòng)開(kāi)發(fā)者學(xué)習(xí)Flutter，最關(guān)鍵的就是要轉(zhuǎn)變思維。

眾所周知，F(xiàn)lutter的定位是一套跨平臺(tái)的UI工具箱，所以UI是學(xué)習(xí)Flutter的主要矛盾。下面是官方定義：

Flutter is Google’s UI toolkit for building beautiful， natively compiled applications for mobile， web， and desktop from a single codebase

Flutter的UI設(shè)計(jì)采用的是聲明式的風(fēng)格，而Android/Ios采用的是命令式風(fēng)格。 由于我們習(xí)慣了命令式風(fēng)格，突然轉(zhuǎn)向Flutter的話，總是會(huì)以命令式的思維去思考，會(huì)遇到較大麻煩。只要轉(zhuǎn)變了思維，對(duì)于一個(gè)有經(jīng)驗(yàn)的Android/Ios開(kāi)發(fā)者而言，F(xiàn)lutter就變得非常簡(jiǎn)單了。那么什么是聲明式風(fēng)格？什么又是命令式風(fēng)格呢？多說(shuō)無(wú)益，實(shí)例走起…

假設(shè)現(xiàn)在有一個(gè)很簡(jiǎn)單的需求： UI上有個(gè)方塊，要求根據(jù)不同的情形展示不同的顏色，如下圖所示：

下面我們分別用命令式與聲明式實(shí)現(xiàn)上面的需求，看看有什么區(qū)別

命令式

上面的偽代碼展示了，不同條件下，我們通過(guò)調(diào)用View對(duì)象的方法setColor來(lái)修改其顏色屬性，從而達(dá)到改變其顏色的需求。

可見(jiàn)，命令式是通過(guò)修改UI對(duì)象的狀態(tài)來(lái)達(dá)到改變UI顯示樣式的，這就意味著此UI對(duì)象必須是可變的，這就要求開(kāi)發(fā)者負(fù)責(zé)維護(hù)這些UI對(duì)象的狀態(tài)。

聲明式

上面的偽代碼展示了，不同的條件下，我們構(gòu)建新的顏色不一樣的View對(duì)象來(lái)實(shí)現(xiàn)改變其顏色的需求。

可見(jiàn)，聲明式可以使View對(duì)象為不可變對(duì)象，每次改變UI都是構(gòu)建一個(gè)新的UI對(duì)象，而不是去修改其屬性。

結(jié)論

所以在使用Flutter構(gòu)建UI時(shí)千萬(wàn)不要想著去修改UI對(duì)象的狀態(tài)（屬性），如果UI狀態(tài)變了，例如Textview的內(nèi)容從I love android 變成了I love flutter， 不要想著調(diào)用Textview對(duì)象的方法去修改其文本，而是要以I love flutter為文本去構(gòu)建一個(gè)新的Textview對(duì)象。剩下的就交給Flutter框架吧，其會(huì)幫你重新渲染那些必要的部分。

在Flutter中狀態(tài)和UI（Widget）是分開(kāi)的，當(dāng)我們要刷新UI的時(shí)候，只需要準(zhǔn)備好狀態(tài)，然后Flutter框架就會(huì)使用這些新的狀態(tài)重新構(gòu)建新的Widget。

讓我們通過(guò)一個(gè)實(shí)例感受一下

下面的代碼，構(gòu)建了如下一個(gè)非常簡(jiǎn)單的頁(yè)面，由于我們isLoveAndroid為true，所以Flutter就為我們構(gòu)建了一個(gè)展示I love Android的Text控件。

總結(jié)

只要轉(zhuǎn)變了思維，在使用Flutter搭建UI的時(shí)候就會(huì)顯得很順暢，特別是設(shè)計(jì)復(fù)雜UI的時(shí)候，不會(huì)進(jìn)入死胡同。

責(zé)任編輯：xj