Android開發者的Flutter入門學習

時間 2019-12-05

標籤 android 開發者 flutter 入門學習欄目 Android 简体版

原文原文鏈接

序言

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

官網

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

Flutter 中文官網git

安裝

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

特性

一、widget（至關於Android中的View）

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

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

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

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 中，目前最好的作法就是新建一個類，用來聲明你所須要的字符串

聲明：
class Strings{
  static String welcomeMessage = "Welcome To Flutter";
}

使用：
new 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線程直接運行網絡請求代碼：

loadData() async {
  String dataURL = "https://jsonplaceholder.typicode.com/posts";
  http.Response response = await http.get(dataURL);
  setState(() {
    widgets = JSON.decode(response.body);
  });
}
複製代碼

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