序言
Flutter 出來已經(jīng)有些日子了,越來越多的開發(fā)者也開始嘗試使用 Flutter 進行開發(fā),F(xiàn)lutter 是谷歌的移動UI框架,基于 Dart 語言,支持多端開發(fā)(Android、iOS、Web),聽到這里是不是想要躍躍欲試了,由于LZ也正在踩坑的路上,所以有寫的不對的地方還請多多指教。
官網(wǎng)
任何一門語言,官網(wǎng)都是最好的學(xué)習(xí)渠道,雖然說大多數(shù)都是英文的,但現(xiàn)在谷歌已經(jīng)有很多都支持中文版本了:
安裝
安裝直接按照官網(wǎng)的來就行了,最主要的就是配置一下環(huán)境變量,下載下來的 flutter 包你可以理解為 java 中的 jar 包,開發(fā)的時候需要導(dǎo)入的。
特性
1、widget(相當(dāng)于Android中的View)
我們都知道,在 Android 中頁面是由很多個View來構(gòu)成的,在 Flutter 中,Widget 用來構(gòu)成頁面上的內(nèi)容,但是和 View 不同的是,Widget 是不可變的,有些人可能就有疑問了,不可變那豈不是靜態(tài)頁面,非也非也,那肯定有其他辦法的咯,接著往下看:
1.1、不可變狀態(tài)的小部件StatelessWidget
你可以將 StatelessWidget 理解成 Android 中的 ViewGroup,這是一個無狀態(tài)的小部件,什么意思呢,就是當(dāng)你的頁面部分不依賴于對象配置信息外的其他任何內(nèi)容時,簡而言之就是你的頁面是靜態(tài)頁面時,就可以使用它。
1.2、可變狀態(tài)的小部件StatefulWidget
和 StatelessWidget 一樣可以理解為 ViewGroup,但是它是有狀態(tài)的,這個狀態(tài)類似于 Activity 的生命周期,當(dāng)你的頁面需要動態(tài)的改變時,你就需要使用它。
注意
如果一個 Widget 發(fā)生了變化(用戶與之交互),那么它就是有狀態(tài)的;如果一個子 Widget 是有狀態(tài)的,那么包裹它的父 Widget 可以是有狀態(tài)的也可以是無狀態(tài)的,簡而言之,StatelessWidget 中可以包含 StatefulWidget,而 StatefulWidget 中也可以包含 StatelessWidget。
2、Android中的四大組件還有與之對應(yīng)的嗎
除了頁面之外,其他的肯定都沒有,因為畢竟是跨端開發(fā)的框架,不是專門為 Android 而設(shè)計的,可能有些人要問了,那如果想實現(xiàn) Android 中的一些特殊的功能豈不是做不了了,非也非也,這個就屬于另外一個知識了,賣個關(guān)子先,接著往下看;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 中配置這些圖片,這個文件相當(dāng)于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 - 應(yīng)用程序可見并響應(yīng)用戶輸入。這是來自Android的onResume
- inactive - 應(yīng)用程序處于非活動狀態(tài),并且未接收用戶輸入。此事件在Android上未使用,僅適用于iOS
- paused - 應(yīng)用程序當(dāng)前對用戶不可見,不響應(yīng)用戶輸入,并在后臺運行。這是來自Android的onPause
- suspending - 該應(yīng)用程序?qū)簳r中止。這在iOS上未使用
5、異步UI
Dart是單線程執(zhí)行模型,支持Isolates(在另一個線程上運行Dart代碼的方式)、事件循環(huán)和異步編程。 除非您啟動一個Isolate,否則您的Dart代碼將在主UI線程中運行,并由事件循環(huán)驅(qū)動。
當(dāng)你進行網(wǎng)絡(luò)請求時,可以在UI線程直接運行網(wǎng)絡(luò)請求代碼:
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)絡(luò)請求完成之后再執(zhí)行下面更新語句;在 StatefulWidget 中,我們使用 setState 方法來更新UI操作,這會重新執(zhí)行 build 方法。
6、組件
在 Flutter 中,有很多組件,他們可以構(gòu)建成頁面,因為組件繁多,所以這里我就不一一介紹了,我會在接下來的博客中為大家一一介紹 Flutter 中各種組件的使用方法,也歡迎大家持續(xù)關(guān)注后續(xù)博客。
最后
提醒一下大家,如果開發(fā)過程中有大的修改時,還是不要相信 Flutter 的熱重載,在看到運行情況與實際不符時,卸載重裝再來一遍。最后的最后,上一張LZ花了一天半時間入門的Demo:
