學習Flutter以前,不瞭解這些,會事倍功半!

序言

Flutter 出來已經有些日子了,愈來愈多的開發者也開始嘗試使用 Flutter 進行開發,Flutter 是谷歌的移動UI框架,基於 Dart 語言,支持多端開發(Android、iOS、Web),聽到這裏是否是想要躍躍欲試了,因爲LZ也正在踩坑的路上,因此有寫的不對的地方還請多多指教。java

官網

任何一門語言,官網都是最好的學習渠道,雖說大多數都是英文的,但如今谷歌已經有不少都支持中文版本了:git

Flutter中文官網:https://flutterchina.club/github

安裝

安裝直接按照官網的來就好了,最主要的就是配置一下環境變量,下載下來的 flutter 包你能夠理解爲 java 中的 jar 包,開發的時候須要導入的。面試

特性

一、widget(至關於Android中的View)

咱們都知道,在 Android 中頁面是由不少個View來構成的,在 Flutter 中,Widget 用來構成頁面上的內容,可是和 View 不一樣的是,Widget 是不可變的,有些人可能就有疑問了,不可變那豈不是靜態頁面,非也非也,那確定有其餘辦法的咯,接着往下看:編程

1.一、不可變狀態的小部件StatelessWidgetjson

你能夠將 StatelessWidget 理解成 Android 中的 ViewGroup,這是一個無狀態的小部件,什麼意思呢,就是當你的頁面部分不依賴於對象配置信息外的其餘任何內容時,簡而言之就是你的頁面是靜態頁面時,就可使用它。網絡

1.二、可變狀態的小部件StatefulWidget架構

和 StatelessWidget 同樣能夠理解爲 ViewGroup,可是它是有狀態的,這個狀態相似於 Activity 的生命週期,當你的頁面須要動態的改變時,你就須要使用它。app

注意框架

若是一個 Widget 發生了變化(用戶與之交互),那麼它就是有狀態的;若是一個子 Widget 是有狀態的,那麼包裹它的父 Widget 能夠是有狀態的也能夠是無狀態的,簡而言之,StatelessWidget 中能夠包含 StatefulWidget,而 StatefulWidget 中也能夠包含 StatelessWidget。

二、Android中的四大組件還有與之對應的嗎

除了頁面以外,其餘的確定都沒有,由於畢竟是跨端開發的框架,不是專門爲 Android 而設計的,可能有些人要問了,那若是想實現 Android 中的一些特殊的功能豈不是作不了了,非也非也,這個就屬於另一個知識了,賣個關子先,接着往下看;Activity 和 Fragment 在 Flutter 中都變成了 Widget。

三、資源文件

3.一、資源圖片

在Android中資源圖片有不少種分辨率,Flutter 遵循像iOS這樣簡單的3種分辨率格式: 1x, 2x, and 3x,在根目錄下建立一個 images 的文件夾,而後再在 images 文件夾中建立三個文件夾用來存放不一樣分辨率的圖片:

  • ../icon.png
  • ../2.0x/icon.png
  • ../3.0x/icon.png

而後,你須要在 pubspec.yaml 中配置這些圖片,這個文件至關於Android中的gradle文件。

3.二、字符串

在 Flutter 中,目前最好的作法就是新建一個類,用來聲明你所須要的字符串

1聲明:
2class Strings{
3  static String welcomeMessage = "Welcome To Flutter";
4}
5
6使用:
7new Text(Strings.welcomeMessage);

四、生命週期

在 Flutter 中,StatelessWidget 是沒有生命週期的,只有 StatefulWidget 纔有,咱們通常經過掛接到WidgetsBinding觀察並監聽didChangeAppLifecycleState更改事件來監聽生命週期事件,有如下這些生命週期:

  • resumed - 應用程序可見並響應用戶輸入。這是來自Android的onResume
  • inactive - 應用程序處於非活動狀態,而且未接收用戶輸入。此事件在Android上未使用,僅適用於iOS
  • paused - 應用程序當前對用戶不可見,不響應用戶輸入,並在後臺運行。這是來自Android的onPause
  • suspending - 該應用程序將暫時停止。這在iOS上未使用

五、異步UI

Dart是單線程執行模型,支持Isolates(在另外一個線程上運行Dart代碼的方式)、事件循環和異步編程。 除非您啓動一個Isolate,不然您的Dart代碼將在主UI線程中運行,並由事件循環驅動。

當你進行網絡請求時,能夠在UI線程直接運行網絡請求代碼:

1loadData() async {
2  String dataURL = "https://jsonplaceholder.typicode.com/posts";
3  http.Response response = await http.get(dataURL);
4  setState(() {
5    widgets = JSON.decode(response.body);
6  });
7}

這裏使用了 async/await 語法來調用API,你能夠理解爲,使用 async 以後這個方法就變成了異步的方法,而後須要等待(await)網絡請求完成以後再執行下面更新語句;在 StatefulWidget 中,咱們使用 setState 方法來更新UI操做,這會從新執行build 方法。

六、組件

在 Flutter 中,有不少組件,他們能夠構建成頁面,由於組件繁多,因此這裏我就不一一介紹了,我會在接下來的博客中爲你們詳細介紹 Flutter 中各類組件的使用,也歡迎你們持續關注我。

最後

提醒一下你們,若是開發過程當中有大的修改時,仍是不要相信 Flutter 的熱重載,在看到運行狀況與實際不符時,卸載重裝再來一遍。最後的最後,上一張花了一天半時間入門的Demo:

Flutter解析Demo:https://github.com/24Kshign/F...

在這我也分享一份本身收錄整理的 Android學習PDF+架構視頻+面試文檔+源碼筆記 ,還有高級架構技術進階腦圖、Android開發面試專題資料,高級進階架構資料這些都是我閒暇還會反覆翻閱的精品資料

總之也是在這裏幫助你們學習提高進階,也節省你們在網上搜索資料的時間來學習,也能夠分享給身邊好友一塊兒學習

若是你有須要的話,能夠點贊+評論關注我加Vx:15388039515(備註思否,須要資料)

相關文章
相關標籤/搜索