Android開發(fā)者的Flutter入門學習

序言

Flutter 出來已經(jīng)有些日子了买决，越來越多的開發(fā)者也開始嘗試使用 Flutter 進行開發(fā)，F(xiàn)lutter 是谷歌的移動UI框架引镊，基于 Dart 語言胸嘁，支持多端開發(fā)（Android、iOS凹蜂、Web）馍驯，聽到這里是不是想要躍躍欲試了阁危，由于LZ也正在踩坑的路上，所以有寫的不對的地方還請多多指教汰瘫。

官網(wǎng)

任何一門語言狂打，官網(wǎng)都是最好的學習渠道，雖然說大多數(shù)都是英文的混弥，但現(xiàn)在谷歌已經(jīng)有很多都支持中文版本了：

Flutter 中文官網(wǎng)

安裝

安裝直接按照官網(wǎng)的來就行了趴乡，最主要的就是配置一下環(huán)境變量，下載下來的 flutter 包你可以理解為 java 中的 jar 包蝗拿，開發(fā)的時候需要導入的晾捏。

特性

1、widget（相當于Android中的View）

我們都知道哀托，在 Android 中頁面是由很多個View來構成的惦辛，在 Flutter 中，Widget 用來構成頁面上的內(nèi)容仓手，但是和 View 不同的是胖齐，Widget 是不可變的，有些人可能就有疑問了嗽冒，不可變那豈不是靜態(tài)頁面呀伙，非也非也，那肯定有其他辦法的咯添坊，接著往下看：

1.1剿另、不可變狀態(tài)的小部件StatelessWidget

你可以將 StatelessWidget 理解成 Android 中的 ViewGroup，這是一個無狀態(tài)的小部件贬蛙，什么意思呢驰弄，就是當你的頁面部分不依賴于對象配置信息外的其他任何內(nèi)容時，簡而言之就是你的頁面是靜態(tài)頁面時速客，就可以使用它戚篙。

1.2、可變狀態(tài)的小部件StatefulWidget

和 StatelessWidget 一樣可以理解為 ViewGroup溺职，但是它是有狀態(tài)的岔擂，這個狀態(tài)類似于 Activity 的生命周期，當你的頁面需要動態(tài)的改變時浪耘，你就需要使用它乱灵。

注意

如果一個 Widget 發(fā)生了變化（用戶與之交互），那么它就是有狀態(tài)的七冲；如果一個子 Widget 是有狀態(tài)的痛倚，那么包裹它的父 Widget 可以是有狀態(tài)的也可以是無狀態(tài)的，簡而言之澜躺，StatelessWidget 中可以包含 StatefulWidget蝉稳，而 StatefulWidget 中也可以包含 StatelessWidget抒蚜。

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

除了頁面之外耘戚，其他的肯定都沒有嗡髓，因為畢竟是跨端開發(fā)的框架，不是專門為 Android 而設計的收津，可能有些人要問了饿这，那如果想實現(xiàn) Android 中的一些特殊的功能豈不是做不了了，非也非也撞秋，這個就屬于另外一個知識了长捧，賣個關子先，接著往下看吻贿；Activity 和 Fragment 在 Flutter 中都變成了 Widget唆姐。

3、資源文件

3.1廓八、資源圖片

在Android中資源圖片有很多種分辨率，F(xiàn)lutter 遵循像iOS這樣簡單的3種分辨率格式: 1x, 2x, and 3x赵抢，在根目錄下創(chuàng)建一個 images 的文件夾剧蹂，然后再在 images 文件夾中創(chuàng)建三個文件夾用來存放不同分辨率的圖片：

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

然后，你需要在 pubspec.yaml 中配置這些圖片烦却，這個文件相當于Android中的 gradle文件宠叼。

3.2、字符串

在 Flutter 中其爵，目前最好的做法就是新建一個類冒冬，用來聲明你所需要的字符串

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

使用：
new Text(Strings.welcomeMessage);

4、生命周期

在 Flutter 中摩渺，StatelessWidget 是沒有生命周期的简烤，只有 StatefulWidget 才有，我們一般通過掛接到WidgetsBinding觀察并監(jiān)聽didChangeAppLifecycleState更改事件來監(jiān)聽生命周期事件摇幻，有以下這些生命周期：

resumed - 應用程序可見并響應用戶輸入横侦。這是來自Android的onResume
inactive - 應用程序處于非活動狀態(tài)，并且未接收用戶輸入绰姻。此事件在Android上未使用枉侧，僅適用于iOS
paused - 應用程序當前對用戶不可見，不響應用戶輸入狂芋，并在后臺運行榨馁。這是來自Android的onPause
suspending - 該應用程序?qū)簳r中止。這在iOS上未使用

5帜矾、異步UI

Dart是單線程執(zhí)行模型翼虫，支持Isolates（在另一個線程上運行Dart代碼的方式）屑柔、事件循環(huán)和異步編程。除非您啟動一個Isolate蛙讥，否則您的Dart代碼將在主UI線程中運行锯蛀，并由事件循環(huán)驅(qū)動。

當你進行網(wǎng)絡請求時次慢，可以在UI線程直接運行網(wǎng)絡請求代碼：

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

這里使用了 async/await 語法來調(diào)用API旁涤，你可以理解為，使用 async 之后這個方法就變成了異步的方法迫像，然后需要等待（await）網(wǎng)絡請求完成之后再執(zhí)行下面更新語句劈愚；在 StatefulWidget 中，我們使用 setState 方法來更新UI操作闻妓，這會重新執(zhí)行 build 方法菌羽。

6、組件

在 Flutter 中由缆，有很多組件注祖，他們可以構建成頁面，因為組件繁多均唉，所以這里我就不一一介紹了是晨，我會在接下來的博客中為大家一一介紹 Flutter 中各種組件的使用方法，也歡迎大家持續(xù)關注后續(xù)博客舔箭。

6.1罩缴、Flutter組件學習（一）—— Text組件

最后

提醒一下大家，如果開發(fā)過程中有大的修改時层扶，還是不要相信 Flutter 的熱重載箫章，在看到運行情況與實際不符時，卸載重裝再來一遍镜会。最后的最后檬寂，上一張LZ花了一天半時間入門的Demo：

地址：Flutter解析Demo

image