混子前端帶你入門Flutter

Flutter介紹

Flutter是谷歌移動的UI框架，能夠快速在IOS和Android上構建原生用戶界面，Flutter能夠與現有代碼一塊兒工做，而且Flutter是徹底免費、開源的。

我的感受Flutter是支持跨平臺最多的UI框架，減小了開發成本，編寫一次代碼節省時間。

跨平臺：Linux、Android、IOS、Fuchsia(谷歌新出的操做系統)；

原用用戶界面：它是原生的，讓體驗更好，性能更好；

開源免費：徹底開源，能夠進行商用；

Flutter與主流框架對比

• Cordova：混合式開發框架Hybrid App，我的認爲完勝Cordova，由於Cordova仍是基於網頁技術進行包裝的，裏面仍是HTML+CSS，利用JavaScript進行橋接的方式進行開發，開發出來的仍是網頁，從體驗和流暢度不如原生。
  
  
• RN(React Native)：生成原生App，但以View爲基礎潛入，因此效率上RN比Cordova高不少，可是RN的渲染機制是基於前端框架的考慮，複雜的UI渲染是依賴多個View疊加的，例如：渲染listView列表，每個小框架都是一個單獨view，而後相互結合疊加，此時若是滑動刷新會有多個對象進行渲染，因此頁面會致使變慢，但RN效率仍是可觀的，能夠達到60幀每秒，很難在往上了(瓶頸)。
  
  
• Flutter：在渲染技術上(吸取前二者教訓後)，選擇了本身實現GDI，因爲有更好的可控性，使用了谷歌的Dart語言，避免了RN那種經過橋接器與JavaScript通訊致使效率低下的問題，因此在性能比RN更高一籌，有經驗開發者能夠打開Android開發者選項中的顯示邊界佈局，能夠看到Flutter是總體的佈局，而RN是View層層嵌套組成，能夠達到120幀每秒。
  

120fps超高性能

fps: 每秒傳輸幀數, 即每秒畫面數

採用GPU渲染，而通常技術採用的是CPU渲染

【電影電視24fps / 液晶顯示器60hz / 遊戲80fps】

生態環境
Google公司出品和推廣，並在中國也有推廣中心

第三方組件也在迅猛發展

參考： github.com/Solido/awes… [ 幾百個經常使用組件 ]

如今愈來愈多的人在使用Flutter：Alibaba(閒魚)、Tencent、JD

ps: 不少人喜歡與RN進行對比，RN的生態環境是比Flutter好不少，但如今Flutter仍是一個嬰兒，只是測試版，正式版還沒推出，能達到如今生態是很不錯的了

開發環境搭建

第一步： java環境下載

www.oracle.com/technetwork…

小夥伴要記得點擊贊成下載文件，下載按提示安裝後，啓動終端輸入java，若是出現一些提示，證實安裝成功

第二步： 下載Flutter按照提示安裝， 瀏覽器輸入：

flutter.dev/docs/develo…

若是往後有須要更新flutter sdk，終端輸入：flutter upgrade便可

第三步：安裝完成後，mac打開.bash_profile文件，將如下代碼複製到文件中：

export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cnexport PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH複製代碼

備註：第三行PATH_TO_FLUTTER_GIT_DIRECTORY是Flutter SDK的路徑

第四步：終端運行flutter doctor(會給出提示)

第五步：安裝Android Studio(建議安裝3.0)

瀏覽器輸入developer.android.com
下載Android Studio按照提示安裝
運行Android Studio 右下角選擇configure安裝flutter插件

因爲本地沒有，因此要搜索倉庫安裝flutter插件，安裝後會自動安裝好dart插件

安裝完成後restart，能夠看到多了一項：Start a new Flutter project，說明已經安裝好了，關掉便可

第六步：繼續運行flutter doctor能夠看到還有感嘆號，繼續贊成協議 flutter doctor --android-licenses

第七步：安裝AVD虛擬機創建

運行Android Studio新建flutter項目，而後選擇上面tools菜單，點擊AVD Manager 彈出框

點擊create便可，這裏機型選擇Nexus 5根據提示完成便可

第八步： VScode 商店搜索Flutter install便可，會自動安裝Dark

第九步：Xcode安裝

      這裏參考文章安裝便可   www.jianshu.com/p/603649a02… 

最後運行flutter doctor出現以下所示，就證實環境搭建好了

來測試一下：

在VScode中新建項目，運動終端輸入flutter create demo建立flutter項目，並在VScode運行該項目，點擊右下角No Device，打開以前安裝過的虛擬機  (demo是項目名字)

 接下來終端進入項目目錄，輸入flutter run運行項目，就能夠在虛擬機看到剛拉下來的初始化項目了

 若是作到這一步，那說明咱們基本的開發環境已經構建完成了。

第一個HelloWorld

StatefullWidget和StatelessWidget的區別：

       StatefullWidget：動態組件，如進度條組件
       StatelessWidget：靜態組件，如文本框

VScode控制虛擬機快捷鍵：

      R鍵：點擊後熱加載，直接查看預覽效果
      P鍵：在虛擬機中顯示佈局網格，工做中常用
      O鍵：切換Android和IOS的預覽模式
      Q鍵：退出調試預覽模式
也可使用VScode中 debug熱更新模式(耗性能)

     

經常使用組件講解

TextWidget文本組件

      textAlign：文本對齊屬性
      maxLines：文本顯示的最大行數
      overflow：控制文本的溢出效果

style屬性的用法

Container容器組件

建立容器組件: 在body的child中寫入 Container便可

padding 內邊距屬性：
      EdgeInsets.all(): 統一設置
      EdgeInsets.fromLTRB(val1, val2, val3, val4)

Alignment屬性與一些樣式屬性的使用，見下圖

注意：全部的屬性都是組件Widget，萬物皆組件。

Image圖片組件

Image Widget加入方式

      Image.asset加載資源圖片，會使打包時包體過大(慎用)

      Image.network網絡資源圖片

      Image.file本地圖拼啊，相冊的圖片預覽

      Image.memory加載到內存中的圖片(不經常使用)

Fit屬性（根據圖片父容器控制圖片拉伸 擠壓 裁切）

      BoxFit.fill 拉伸充滿父容器

      BoxFit.contain全圖顯示，顯示原比例，以容器爲基礎，最大顯示圖片

      BoxFit.cover:圖片要充滿整個容器，可是要保持原比例

      BoxFit.fitWidth / BoxFit.fitHeight: 圖片 橫向 / 縱向 鋪滿父容器，會被裁切掉部分

      ...

圖片混合模式( 須要2個值 )

      color: 給圖片加顏色, 沒有color怎麼混合呢？

      colorBlendMode: 給圖片一個混合模式

repeat圖片重複充滿容器

      ImageRepeat.repeatX: 橫向重複

      ImageRepeat.repeatY: 縱向重複
      ...

ListView組件

      new ListView() // 列表組件

      列表組件須要一個子元素children，返回數組，因此這裏要添加數組 

      這裏ListView children中能夠存放圖片，圖片的上拉 和 下拉效果是flutter封裝好的

ListTile使用:  造成列表組件中的一列，至關於列表瓦片，要一層層裝飾起來，不只能夠在ListView使用，還能夠用在其它組件

       leading / title：最開始的位置 / 內容

橫向列表的使用

scrollDirection基本語法

      Axis.horizontal：橫向滾動或者叫水平方向滾動

      Axis.vertical：縱向滾動或者叫垂直方向滾動

代碼優化，自定義組件

      以上代碼層級嵌套太多了，因此考慮優化，把ListView摘除出去

接下來直接在主頁面中引入ListView便可：

動態列表的使用

動態列表：好比服務端返回1000條數據，獲得以後傳遞到頁面列表進行渲染

Dart中List類型的使用 [List能夠簡單理解成數組]

      假如要在MyApp組件中傳遞參數items參數

        items: new List() // 非固定長度

        items: new List(3) // 長度是3

        items: new List<String>() // 數組中類型是string

        items: [1,2,3,4]

傳遞和接受參數，實現動態列表的基礎

注意：這裏若是虛擬機掛機報length錯誤的話，將虛擬機demo程序退出 從新flutter run便可

緣由是由於 虛擬機有緩存 咱們加載了1000條 緩存不夠用了 (虛擬機的一些bug)

GridView網格列表使用

padding: 設置內邊距的屬性

crossAxisSpacing：網格間的空隙

crossAxisCount：網格的列數

childAspectRatio：設置長寬比例

好了，混子前端也知道總結的很糙，但跟着流程走下來，你必定會入門Flutter

這裏若是連官網API都沒讀過的話建議移步到官網看一下

最後老規矩，歡迎點贊和糾錯，祝你們工做愉快！