13518219792
水平垂直居中布局。類似Container設置alignment
網站建設哪家好，找創新互聯！專注于網頁設計、網站建設、微信開發、微信小程序開發、集團企業網站建設等服務項目。為回饋新老客戶創新互聯還提供了鷹潭免費建站歡迎大家使用！
固定寬高布局，類似Container設置了寬高
寬高比布局。
四、FractionallySizedBox
百分比布局。
這里注意百分比布局外層一定是一個有大小的容器（如SizedBox、Container），否則會報錯。
卡片布局。
本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2
我是小栗子，初學Flutter ，文章會根據學習進度不定時更新，請多多指教~~
相對于iOS開發，Flutter的布局更具有靈活性，每個頁面設計都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應該如何去布局，我覺得不現實，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。
根據設計圖，可以看出整體可以分成兩部分，上面一部分是系統介紹模塊，下面一部分是真正的登錄內容，因為涉及到疊加，因此考慮用Stack；
系統介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴展；載放logo圖標在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。
登錄內容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。
第一行為Image，
第二行為Text，
第三行可以看成一個小Column，分兩塊進行布局
第四行可以看成一個小Column，分兩塊進行布局
第五行可以看作一個TextButton，
第六行可以看作一個Row，分三塊進行布局
通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實現的話，就是復雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復的或者覺得可以封裝出來的部分，則進行下一步。
每一行的拆解，大致也是按照這個思路來進行，因此筆者在這里就不做講解了。
在做到第三第四行的時候，發現這兩個很相似，而且設計到一些交互邏輯，筆者就想對第三第四行的這種展示進行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實現這種輸入操作，具體的實現筆者不再詳細的描述了。
經過這一步，整體的規劃設計圖已經有了，各個組件也都有了，接下來的工作就是組裝了。
具體布局設計到一些細節的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。
像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區域。
對文字顏色大小等，可以用TextStyle直接設置。
對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。
此控件比較簡單，按鈕的功能可劃分為UI樣式與事件回調
這里將幾種不同的按鈕一起運行，做下對比動圖如下：
這里對五種按鈕進行column居中排列如下
Text用于顯示簡單樣式文本，它包含一些控制文本顯示樣式的一些屬性。
TextStyle用于指定文本顯示的樣式如顏色、字體、粗細、背景等。
TextStyle更多屬性設置如下：
如果我們需要對一個Text內容的不同部分按照不同的樣式顯示，即富文本，這時就可以使用TextSpan，它代表文本的一個“片段”。
如上述，我們當然也可以在上述鏈接上添加手勢事件，后續會提到。
在widget樹中，文本的樣式默認是可以被繼承的，因此，如果在widget樹的某一個節點處設置一個默認的文本樣式，那么該節點的子樹中所有文本都會默認使用這個樣式，而DefaultTextStyle正是用于設置默認文本樣式的。
舉例如下：
