Flutter如何安裝使用

這篇文章給大家分享的是有關(guān)Flutter如何安裝使用的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

序言

Flutter出來已經(jīng)有些日子了，越來越多的開發(fā)者也開始嘗試使用 Flutter 進(jìn)行開發(fā)，Flutter 是谷歌的移動(dòng)UI框架，基于 Dart 語言，支持多端開發(fā)（Android、iOS、Web），聽到這里是不是想要躍躍欲試了，由于小編也正在踩坑的路上，所以有寫的不對(duì)的地方還請(qǐng)多多指教。

官網(wǎng)

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

Flutter中文官網(wǎng)： https://flutterchina.club/

安裝

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

特性

1、widget（相當(dāng)于Android中的View）

我們都知道，在 Android 中頁面是由很多個(gè)View來構(gòu)成的，在 Flutter 中，Widget 用來構(gòu)成頁面上的內(nèi)容，但是和 View 不同的是，Widget 是不可變的，有些人可能就有疑問了，不可變那豈不是靜態(tài)頁面，非也非也，那肯定有其他辦法的咯，接著往下看：

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

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

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

和 StatelessWidget 一樣可以理解為 ViewGroup，但是它是有狀態(tài)的，這個(gè)狀態(tài)類似于 Activity 的生命周期，當(dāng)你的頁面需要?jiǎng)討B(tài)的改變時(shí)，你就需要使用它。

注意

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

2、Android中的四大組件還有與之對(duì)應(yīng)的嗎

除了頁面之外，其他的肯定都沒有，因?yàn)楫吘故强缍碎_發(fā)的框架，不是專門為 Android 而設(shè)計(jì)的，可能有些人要問了，那如果想實(shí)現(xiàn) Android 中的一些特殊的功能豈不是做不了了，非也非也，這個(gè)就屬于另外一個(gè)知識(shí)了，賣個(gè)關(guān)子先，接著往下看；Activity 和 Fragment 在 Flutter 中都變成了 Widget。

3、資源文件

3.1、資源圖片

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

../icon.png

../2.0x/icon.png

../3.0x/icon.png

然后，你需要在 pubspec.yaml 中配置這些圖片，這個(gè)文件相當(dāng)于Android中的 gradle文件。

3.2、字符串

在 Flutter 中，目前最好的做法就是新建一個(gè)類，用來聲明你所需要的字符串

  聲明：  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)用程序處于非活動(dòng)狀態(tài)，并且未接收用戶輸入。此事件在Android上未使用，僅適用于iOS

paused - 應(yīng)用程序當(dāng)前對(duì)用戶不可見，不響應(yīng)用戶輸入，并在后臺(tái)運(yùn)行。這是來自Android的onPause

suspending - 該應(yīng)用程序?qū)簳r(shí)中止。這在iOS上未使用

5、異步UI

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

當(dāng)你進(jìn)行網(wǎng)絡(luò)請(qǐng)求時(shí)，可以在UI線程直接運(yùn)行網(wǎng)絡(luò)請(qǐ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 之后這個(gè)方法就變成了異步的方法，然后需要等待（await）網(wǎng)絡(luò)請(qǐng)求完成之后再執(zhí)行下面更新語句；在 StatefulWidget 中，我們使用 setState 方法來更新UI操作，這會(huì)重新執(zhí)行 build 方法。

感謝各位的閱讀！關(guān)于“Flutter如何安裝使用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！