相對于iOS開發(fā)，F(xiàn)lutter的布局更具有靈活性，每個頁面設(shè)計(jì)都不一樣，相同頁面可選擇的布局方式也不一樣，如果單純的說應(yīng)該如何去布局，我覺得不現(xiàn)實(shí)，大家可以參考下 Flutter官方的布局教程 。接下來，筆者，通過項(xiàng)目中的一個頁面，來一步一步的拆解布局的流程。整個過程，基本上按照拆解、組件封裝、具體布局這三步來的。
成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)孟村,10余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792
根據(jù)設(shè)計(jì)圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因?yàn)樯婕暗蒋B加，因此考慮用Stack；
系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個contanier，無須指定位置，全視圖擴(kuò)展；載放logo圖標(biāo)在上一層，用Image。最后兩個Text同級放在最上層。Image，Text各用Positioned包裹去指定位置。
登錄內(nèi)容模塊是最外層是一個Contanier容器，去控制背景色和圓角。然后是一個Column元素，逐行排列。
第一行為Image，
第二行為Text，
第三行可以看成一個小Column，分兩塊進(jìn)行布局
第四行可以看成一個小Column，分兩塊進(jìn)行布局
第五行可以看作一個TextButton，
第六行可以看作一個Row，分三塊進(jìn)行布局
通過上面這樣一步一步的分析后，基本上對大致的布局有了一個了解，最外層的控件大致選對（只要能實(shí)現(xiàn)的話，就是復(fù)雜度以及效率的問題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺得可以封裝出來的部分，則進(jìn)行下一步。
每一行的拆解，大致也是按照這個思路來進(jìn)行，因此筆者在這里就不做講解了。
在做到第三第四行的時候，發(fā)現(xiàn)這兩個很相似，而且設(shè)計(jì)到一些交互邏輯，筆者就想對第三第四行的這種展示進(jìn)行封裝，覺得今后的布局可能會用到，因此在這一步，可以先把這一塊兒抽離出一個控件。利用TextField來實(shí)現(xiàn)這種輸入操作，具體的實(shí)現(xiàn)筆者不再詳細(xì)的描述了。
經(jīng)過這一步，整體的規(guī)劃設(shè)計(jì)圖已經(jīng)有了，各個組件也都有了，接下來的工作就是組裝了。
具體布局設(shè)計(jì)到一些細(xì)節(jié)的地方，例如整體Column的居中對齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點(diǎn)擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。
像第六行row是放在底部的，就可以在第六行前面增加一個Spacer()去填充空白區(qū)域。
對文字顏色大小等，可以用TextStyle直接設(shè)置。
對于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。
Flutter項(xiàng)目可以用三種方式開發(fā)：
可以根據(jù)自己的需求選擇，由于之前一直做iOS開發(fā)，也做過RN項(xiàng)目開發(fā)，Mac上裝過Android Studio 和 其他安卓模擬器 Genymotion ，所以我選擇Android Studio開發(fā)工具，之前裝的版本 3.0.1 比較老了，所以進(jìn)行了升級 3.4 。
體驗(yàn)Flutter
PS：第一次創(chuàng)建項(xiàng)目可以成功，之后再執(zhí)行這一步操作創(chuàng)建新的Flutter項(xiàng)目時，一直卡住，重啟過很多次Android Studio一直都是這樣，后面查詢資料，發(fā)現(xiàn)自己沒有同意使用 android-licenses ，可以通過下列命令驗(yàn)證，第一步，先驗(yàn)證：
第一步檢測結(jié)果，發(fā)現(xiàn)是需要同意 android-licenses ：
第二步執(zhí)行同意命令，操作時會有很多個 android-licenses 需要同意：
第二步檢測結(jié)果：
第三步再次驗(yàn)證，當(dāng)?shù)玫揭韵陆貓D中結(jié)果時，代表所有環(huán)境配置已經(jīng)完成：
上述命令創(chuàng)建一個Flutter項(xiàng)目，項(xiàng)目名為 myapp ，在項(xiàng)目目錄中，有安卓和iOS兩個項(xiàng)目目錄。
Android Studio中會列出所有已經(jīng)連接了電腦的設(shè)備，包括安卓和iPhone。如果想在模擬器上運(yùn)行，下面可以選擇對應(yīng)的模擬器，如圖：
PS：如果想在模擬器上運(yùn)行，需要先安裝一個模擬器，選擇Tools AVD Manager，如圖：
然后選擇Create Virtual Device，根據(jù)提示一步一步操作即可（建議翻墻條件下操作），添加完成后就可以在這個界面看到自己已經(jīng)添加的模擬器，點(diǎn)擊綠色的運(yùn)行按鈕，即可打開該模擬器：
1. 建立一個flutter項(xiàng)目的命令
2. 在ios文件夾下，生成pods文件夾
3. Xcode環(huán)境簽名設(shè)置；
把錯誤的版本刪除再添加，可解決簽名錯誤問題；必須先刪除再添加，直接修改可能不起作用。團(tuán)隊(duì)開發(fā)，必須使用團(tuán)隊(duì)的簽名。
4.運(yùn)行創(chuàng)建的flutter項(xiàng)目；
選擇真機(jī)、模擬機(jī)，點(diǎn)擊運(yùn)行按鈕，或使用命令運(yùn)行：
下面兩步是贈送的：
5.新加一款插件，所涉及的命令；
ios 端所涉及的命令
6. 剛更新的插件和已有的插件有沖突怎么辦？
可以試一試以下步驟：
在編寫幾個 Flutter 項(xiàng)目后，發(fā)現(xiàn) Flutter 的強(qiáng)大之處在于業(yè)務(wù)中所有用到的控件以及場景都有對應(yīng)的處理方案；而 Dart 語言也與 Java 、 Kotlin 類似，所以對 Android 開發(fā)者來說門檻非常低；特意記錄一下常用的控件及其使用：
StatelessWidget 不需要額外的創(chuàng)建 State
StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)
only 可以單獨(dú)設(shè)置每個方向的內(nèi)邊距
類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個對齊方式， crossAxisAlignment 表示橫向的對齊方式
與 Column 相反，主軸是橫向，對齊方式類似， crossAxisAlignment 表示豎向的對齊方式
類似 SizedBox ，一個容器，但是主要功能是有一個 decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影
棧，先入后出，類似于 Android 上的 FrameLayout
通常配合 Stack 使用，固定顯示在某一個位置
配合多 child 使用，會填充剩余的空間
Image 功能強(qiáng)大，使用不同的方法可以加載不同來源的圖片
看到這些方法，突然覺得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無論是圓形還是五角星都不在話下，然而 Android 要實(shí)現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。
名字和 Android 的一模一樣，但是用法卻比 Android 的簡單很多：
主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個 widget ，當(dāng)然了，每個 ListView 都有其對應(yīng)的 item ，在里面的方法中編寫 widget 即可
與 ListView 類似，但是需要有一個 delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少
GridView 沒有 build ， children 表示所有的子 view
最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
如果和我一樣，用慣了VS Code來開發(fā)項(xiàng)目的話，那就跟我一起來配置一下如何在VS Code里運(yùn)行flutter項(xiàng)目。
1.在VS Code里安裝擴(kuò)展：
2.在VScode上打開打開終端，快捷鍵：Ctrl+~（Tab上一個鍵），在終端上輸入：flutter create flutter_app02，即可創(chuàng)建完成！
也可以把之前的項(xiàng)目放到工作區(qū)
3.在終端中運(yùn)行命令：flutter run
運(yùn)行的時候你會發(fā)現(xiàn)手機(jī)提示你安裝個app，點(diǎn)擊安裝完成，項(xiàng)目就在手機(jī)上顯示了，下圖是運(yùn)行成功的提示。
下圖是手機(jī)效果：
如果報錯的話，運(yùn)行下清緩存的命令：flutter clean，把文件夾.gradle刪掉，然后flutter run重新跑下項(xiàng)目。
項(xiàng)目描述： A Tricky Solution for Implementing Inline-Image-In-Text Feature in Flutter.
項(xiàng)目描述：Widgets for creating Hero-like animations between two widgets within the same screen.
項(xiàng)目描述：How to build a Match-3 game, like Candy Crush, Bejeweled, FishDom… in Flutter.
項(xiàng)目描述：A flutter ui challenge .... building a planets app
項(xiàng)目描述：Clip your widgets with custom shapes provided.
項(xiàng)目描述：A widget that displays a collection of dispersed and non-overlapping children
項(xiàng)目描述：Whatsapp UI clone in flutter. ????
項(xiàng)目描述：A guillotine menu for Flutter
項(xiàng)目描述：Library for RAD development in Flutter
項(xiàng)目描述：juejin client ui power by flutter
項(xiàng)目描述：Platform-adapting flutter widgets.
項(xiàng)目描述：A simple navigator assistant that allows for passing data to named routes
項(xiàng)目描述：Periodic callbacks in the background for both IOS and Android. Includes Android Headless mechanism
項(xiàng)目描述：My profile in flutter ????????♂?
項(xiàng)目描述：flutter checkbox
項(xiàng)目描述：Code for Cakes Catalog screen created using Flutter
項(xiàng)目描述：Fimber is Flutter logger inspired by Timber (logger API for Android)
項(xiàng)目描述：a pure dart flutter ocr project.inlude picture corper and invoke api from baidu to ocr.
更多精彩內(nèi)容
重慶分公司
重慶分公司
