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

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

成都一家集口碑和實力的網(wǎng)站建設服務商，擁有專業(yè)的企業(yè)建站團隊和靠譜的建站技術，十多年企業(yè)及個人網(wǎng)站建設經(jīng)驗 ,為成都成百上千客戶提供網(wǎng)頁設計制作,網(wǎng)站開發(fā),企業(yè)網(wǎng)站制作建設等服務,包括成都營銷型網(wǎng)站建設，成都品牌網(wǎng)站建設，同時也為不同行業(yè)的客戶提供成都網(wǎng)站制作、成都網(wǎng)站設計的服務,包括成都電商型網(wǎng)站制作建設,裝修行業(yè)網(wǎng)站制作建設，傳統(tǒng)機械行業(yè)網(wǎng)站建設,傳統(tǒng)農(nóng)業(yè)行業(yè)網(wǎng)站制作建設。在成都做網(wǎng)站,選網(wǎng)站制作建設服務商就選成都創(chuàng)新互聯(lián)。

根據(jù)設計圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內容，因為涉及到疊加，因此考慮用Stack；

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

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

第一行為Image，

第二行為Text，

第三行可以看成一個小Column，分兩塊進行布局

第四行可以看成一個小Column，分兩塊進行布局

第五行可以看作一個TextButton，

第六行可以看作一個Row，分三塊進行布局

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

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

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

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

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

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

對文字顏色大小等，可以用TextStyle直接設置。

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

Flutter基礎Widget之按鈕（RaisedButton、FlatButton、OutlineButton，IconButton）

Flutter中給我們預先定義好了一些按鈕控件給我們用，常用的按鈕如下

我們先來看看MaterialButton中的屬性，可以看到能設置的屬性還是很多的。

下面我們來看看常用屬性

而在Android中如果我們要修改按鈕樣式的話，需要通過selector和Shape等方式進行修改，相比較Flutter來說是要麻煩不少的

RaisedButton的構造方法如下，由于繼承自MaterialButton，所以MaterialButton中的大多數(shù)屬性這邊都能用，且效果一致，這里就不在贅述了

下面我們來看一下屬性

接收一個方法，點擊按鈕時回調該方法。如果傳null，則表示按鈕禁用

如下圖所示

按鈕文本控件，一般都是傳一個Text Widget

按鈕顏色

按鈕的文本顏色

點擊按鈕時水波紋顏色

高亮顏色，點擊（長按）按鈕后的顏色

陰影范圍，一般不會設置太大

內邊距,使用

或者

shape用來設置按鈕的形狀，其接收值是ShapeBorder類型，ShapeBorder是一個抽象類，我們來看看有哪些實現(xiàn)類

可以看到，實現(xiàn)類還是很多的，我們主要來看看常用的即可。

borderRadius 接收一個BorderRadius類型的值，常用方法如下

我們可以把borderRadius分為上下左右四個方向，下面的方法都是對這四個方向進行設置，

帶斜角的長方形邊框

圓形邊框

圓角矩形

兩端是半圓的邊框

FlatButton跟RaisedButton用法基本一致，下面我們就直接用一下

注意，OutlineButton是一個有默認邊線且背景透明的按鈕，也就是說我們設置其邊線和顏色是無效的，其他屬性跟MaterialButton中屬性基本一致

下面我們直接來使用

效果如下：

IconButton是直接繼承自StatelessWidget的，默認沒有背景

我們來看一下他的構造方法

可以看到，icon是必填參數(shù)

icon接收一個Widget，但是一般我們都是傳入一個Icon Widget

其他屬性跟MaterialButton中的屬性用法基本一致

我們來用一下

效果如下：

我們也可以傳一個Text或其他Widget，這個大家自行嘗試吧

如果我們需要設置按鈕的最小寬度以及高度，button屬性中并沒有提供對應的設置方法

使用如下：

Flutter中Button內容大概就是這些

【Flutter】按鈕與文本（三）

此控件比較簡單，按鈕的功能可劃分為UI樣式與事件回調

這里將幾種不同的按鈕一起運行，做下對比動圖如下：

這里對五種按鈕進行column居中排列如下

Text用于顯示簡單樣式文本，它包含一些控制文本顯示樣式的一些屬性。

TextStyle用于指定文本顯示的樣式如顏色、字體、粗細、背景等。

TextStyle更多屬性設置如下：

如果我們需要對一個Text內容的不同部分按照不同的樣式顯示，即富文本，這時就可以使用TextSpan，它代表文本的一個“片段”。

如上述，我們當然也可以在上述鏈接上添加手勢事件，后續(xù)會提到。

在widget樹中，文本的樣式默認是可以被繼承的，因此，如果在widget樹的某一個節(jié)點處設置一個默認的文本樣式，那么該節(jié)點的子樹中所有文本都會默認使用這個樣式，而DefaultTextStyle正是用于設置默認文本樣式的。

舉例如下：

Flutter動畫 --- 平移/旋轉/縮放/漸變

在Flutter中Widget動畫的核心類有下面這些：

Animation：動畫庫中的一個核心類，它生成指導動畫的值；

CurvedAnimation：將動畫過程抽象為一個非線性曲線；

AnimationController：用來管理管理動畫，常用的方法有forward()：啟動動畫；reverse({double from}：倒放動畫；reset()：重置動畫，將其設置到動畫的開始位置；stop({ bool canceled = true })：停止動畫。

Tween：AnimationController對象的范圍從0.0到1.0。如果您需要不同的范圍或不同的數(shù)據(jù)類型，則可以使用Tween來配置動畫以生成不同的范圍或數(shù)據(jù)類型的值。