Flutter開發(fā)--如何布局？

相對(duì)于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個(gè)頁面設(shè)計(jì)都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應(yīng)該如何去布局，我覺得不現(xiàn)實(shí)，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項(xiàng)目中的一個(gè)頁面，來一步一步的拆解布局的流程。整個(gè)過程，基本上按照拆解、組件封裝、具體布局這三步來的。

專注于為中小企業(yè)提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)雙塔免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

根據(jù)設(shè)計(jì)圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因?yàn)樯婕暗蒋B加，因此考慮用Stack；

系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個(gè)contanier，無須指定位置，全視圖擴(kuò)展；載放logo圖標(biāo)在上一層，用Image。最后兩個(gè)Text同級(jí)放在最上層。Image，Text各用Positioned包裹去指定位置。

登錄內(nèi)容模塊是最外層是一個(gè)Contanier容器，去控制背景色和圓角。然后是一個(gè)Column元素，逐行排列。

第一行為Image，

第二行為Text，

第三行可以看成一個(gè)小Column，分兩塊進(jìn)行布局

第四行可以看成一個(gè)小Column，分兩塊進(jìn)行布局

第五行可以看作一個(gè)TextButton，

第六行可以看作一個(gè)Row，分三塊進(jìn)行布局

通過上面這樣一步一步的分析后，基本上對(duì)大致的布局有了一個(gè)了解，最外層的控件大致選對(duì)（只要能實(shí)現(xiàn)的話，就是復(fù)雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺得可以封裝出來的部分，則進(jìn)行下一步。

每一行的拆解，大致也是按照這個(gè)思路來進(jìn)行，因此筆者在這里就不做講解了。

在做到第三第四行的時(shí)候，發(fā)現(xiàn)這兩個(gè)很相似，而且設(shè)計(jì)到一些交互邏輯，筆者就想對(duì)第三第四行的這種展示進(jìn)行封裝，覺得今后的布局可能會(huì)用到，因此在這一步，可以先把這一塊兒抽離出一個(gè)控件。利用TextField來實(shí)現(xiàn)這種輸入操作，具體的實(shí)現(xiàn)筆者不再詳細(xì)的描述了。

經(jīng)過這一步，整體的規(guī)劃設(shè)計(jì)圖已經(jīng)有了，各個(gè)組件也都有了，接下來的工作就是組裝了。

具體布局設(shè)計(jì)到一些細(xì)節(jié)的地方，例如整體Column的居中對(duì)齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點(diǎn)擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。

像第六行row是放在底部的，就可以在第六行前面增加一個(gè)Spacer()去填充空白區(qū)域。

對(duì)文字顏色大小等，可以用TextStyle直接設(shè)置。

對(duì)于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。

Flutter初學(xué) —— 常用控件使用

在編寫幾個(gè) Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場(chǎng)景都有對(duì)應(yīng)的處理方案；而 Dart 語言也與 Java 、 Kotlin 類似，所以對(duì) Android 開發(fā)者來說門檻非常低；特意記錄一下常用的控件及其使用：

StatelessWidget 不需要額外的創(chuàng)建 State

StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)

only 可以單獨(dú)設(shè)置每個(gè)方向的內(nèi)邊距

類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個(gè)對(duì)齊方式， crossAxisAlignment 表示橫向的對(duì)齊方式

與 Column 相反，主軸是橫向，對(duì)齊方式類似， crossAxisAlignment 表示豎向的對(duì)齊方式

類似 SizedBox ，一個(gè)容器，但是主要功能是有一個(gè) decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影

棧，先入后出，類似于 Android 上的 FrameLayout

通常配合 Stack 使用，固定顯示在某一個(gè)位置

配合多 child 使用，會(huì)填充剩余的空間

Image 功能強(qiáng)大，使用不同的方法可以加載不同來源的圖片

看到這些方法，突然覺得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。

名字和 Android 的一模一樣，但是用法卻比 Android 的簡(jiǎn)單很多：

主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個(gè) widget ，當(dāng)然了，每個(gè) ListView 都有其對(duì)應(yīng)的 item ，在里面的方法中編寫 widget 即可

與 ListView 類似，但是需要有一個(gè) delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少

GridView 沒有 build ， children 表示所有的子 view

最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下

Flutter 仿企業(yè)微信多選-listview可見item位置

有一個(gè)需求，是仿企業(yè)照微信的多選（效果大家自己去看）。我想到了兩種方案：

思路：我們直接通過listview.builder是沒辦法自定義SliverChildBuilderDelegate，我們可以通過listview.custom來自定義SliverChildBuilderDelegate，通過自定義我們可以重寫didFinishLayout方法，拿到里面緩存的第一個(gè)item和最后一個(gè)item。可見item的跟緩存item是差5個(gè)的，可以間接算出來，后面發(fā)現(xiàn)其實(shí)不太行，上下滑動(dòng)之后會(huì)顯示之前滑動(dòng)時(shí)候的可見位置。 正解是：這個(gè)里面還有個(gè)estimateMaxScrollOffset方法，正常來說通過它可以獲取到可見的第一個(gè)和最后一個(gè)item位置。但是我一開始使用這個(gè)方法，不會(huì)被回調(diào)，后面不知道修改了什么，就會(huì)回調(diào)，然后這個(gè)位置是準(zhǔn)確的。

看下listview.builder的源碼

我們可以看到childrenDelegate是直接定義好了的。

在看看listview.custom 的源碼

childrenDelegate這個(gè)是一個(gè)必傳參數(shù)。