開始之前

本人使用Flutter開發(fā)的一個(gè)圖文App《每日圖文》，可以同時(shí)運(yùn)行在Android和iOS上，歡迎體驗(yàn)，喜歡的話還不吝Star一下。

叮叮叮～ 傳送門

demo.gif

Flutter為何物？

隨著移動App開發(fā)成本越來越高，近幾年，移動跨平臺開發(fā)的呼聲層出不窮，如FaceBook的推出React-Native，大受歡迎，但其性能并不如人意。

2018年2月27日世界移動大會上，谷歌發(fā)布一個(gè)跨平臺開發(fā)框架，名曰Flutter，用于構(gòu)建高性能的原生Android和iOS兩大平臺的App。

目前還處于測試版本階段：Beta 3。

Flutter編程語言

Flutter使用的編程語言是Dart，Dart是一門動態(tài)語言，幾年前揚(yáng)言要替換JavaScript地位，結(jié)果可想而知。

想必還是很多人都沒聽說過這門語言吧，原諒我也沒聽過。沒想到如今Dart以這樣的形式再次出現(xiàn)在開發(fā)者面前。

Dart雖然是一門動態(tài)語言，但是像極了Java，作為一名Android開發(fā)者，幾乎可以無縫切換，跟Kotlin也有幾分相似。相比Java，Dart更為簡潔。

具體可以到Dart語言中文社區(qū)了解學(xué)習(xí)。

Flutter特點(diǎn)

• 支持熱加載，運(yùn)行之后，修改代碼無需重新安裝和啟動，提升開發(fā)調(diào)試效率
• 支持?jǐn)?shù)據(jù)狀態(tài)綁定，修改數(shù)據(jù)后自動刷新頁面
• 所有的UI都是Widget，包括頁面

Flutter環(huán)境配置

首先clone Flutter的repo

git clone -b beta https://github.com/flutter/flutter.git export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export PATH=`pwd`/flutter/bin:$PATH 

然后檢查是否需要安裝其它依賴，根據(jù)提示來安裝其它的依賴

flutter doctor 

如果是Mac的話，需要配置Flutter全局環(huán)境變量，在命令行輸入：

$HOME/.bash_profile 

在.bash_profile文件添加以下環(huán)境變量：

其中[PATH_TO_FLUTTER_GIT_DIRECTORY]是上面clone的Flutter Repo的本地路徑

export PUB_HOSTED_URL=https://pub.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國內(nèi)用戶需要設(shè)置 export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH 

最后運(yùn)行來生效當(dāng)前命令行窗口：

source $HOME/.bash_profile 

更多平臺配置可到【Flutter中文網(wǎng)】了解

Flutter開發(fā)工具配置

Flutter App可以使用VS Code、Android Studio、IntelliJ進(jìn)行開發(fā)。我直接用的Android Studio。

開始之前，你需要安裝兩個(gè)插件：

• Flutter插件： 支持Flutter開發(fā)工作流 (運(yùn)行、調(diào)試、熱重載等).
• Dart插件： 提供代碼分析 (輸入代碼時(shí)進(jìn)行驗(yàn)證、代碼補(bǔ)全等).

如果在AS中無法在線安裝，可以到以下鏈接中下載離線安裝：

• Flutter插件下載
• Dart插件下載

注意下載的插件版本一定要和Android Studio JRE版本對應(yīng)上，可以在Android Studio -> About Android Studio中查看版本。

模擬器配置

Android Studio支持Android模擬器和iPhone模擬器預(yù)覽，具體安裝參見Flutter中文網(wǎng)，這里不再贅述。

新建Flutter App工程

安裝了以上兩個(gè)插件后，就可以在Android Studio中新建Flutter工程了，按照提示新建即可。

新建工程

工程目錄如下：

工程目錄

可以看到，工程目錄結(jié)構(gòu)主要分為3部分，分別是：

• android 存放Android相關(guān)的東西，如App圖標(biāo)
• ios 存放iOS相關(guān)的東西，如App圖標(biāo)
• lib 存放Flutter源碼

重點(diǎn)來看Flutter的入口：lib/main.dart

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } 

整個(gè)App的入口在void main()方法中。接下來，就來理清一下這個(gè)簡單的代碼。

Flutter頁面架構(gòu)

App開發(fā)最重要的就是UI框架，F(xiàn)lutter重新定制一套自己的UI框架，在底層使用了Skia進(jìn)行渲染。

在Flutter中，一切皆是Widget，頁面是Widget，普通的控件也是Widget。

UI布局和控件

從main.dart中可以看到，F(xiàn)lutter的布局是一層一層嵌套形成的。

• 第一層是Scaffold，一個(gè)實(shí)現(xiàn)了Material design的布局控件，包含了一個(gè)AppBar和一個(gè)body，分別對應(yīng)標(biāo)題欄和頁面。

• 第二層body是一個(gè)Center布局控件，該布局用于使其子布局即child，在父布局中居中顯示

• 最后的子布局是一個(gè)Text控件。

整個(gè)布局就是在頁面的中間顯示了Hello World。

頁面控件：StatelessWidget 和 StatefulWidget

MyApp繼承的StatelessWidget，就是其中一個(gè)頁面相關(guān)的Widget，這個(gè)窗口的特點(diǎn)是靜態(tài)，頁面中的數(shù)據(jù)一旦渲染后，就不能在更改，一般用于顯示靜態(tài)頁面。

另一個(gè)StatefulWidget，則是可以改變狀態(tài)的Widget，頁面的顯示隨著狀態(tài)改變而改變。通過setState方法可以非常方便的修改頁面狀態(tài)，與現(xiàn)在web動態(tài)綁定框架是類似的。

一個(gè)StatefulWidget頁面看起來是這樣的：

class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);final String title;@override _MyHomePageState createState() => new _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> { int _counter = 0;void _incrementCounter() { setState(() { _counter++; }); }@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ), floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), ); } }

可以看到，StatefulWidget的業(yè)務(wù)邏輯基本上都在_MyHomePageState中，這個(gè)類繼承了State。

當(dāng)點(diǎn)擊了FloatingActionButton時(shí)，就會調(diào)用_incrementCounter()方法進(jìn)行setState()，頁面就會跟著改變了。

注：Dart使用下劃線_表示私有，如上面的_count和_incrementCounter()

由于Flutter的布局模式，當(dāng)頁面比較復(fù)雜時(shí)，整個(gè)布局會變得非常復(fù)雜，可讀性也大大降低了，修改起來非常麻煩。

另外，F(xiàn)lutter為了布局靈活性，定義了太多的布局控件，幾十個(gè)布局看得眼花繚亂，從來沒見過這么多布局的框架。

Flutter插件管理

Flutter使用pubspec.yaml管理插件庫，具體如下：

name: daily description: A application to look up photo and article#依賴插件配置 dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2dev_dependencies: flutter_test: sdk: flutterflutter:uses-material-design: true#本地資源配置 assets: - images/ic-pic-loading.png - images/ic-pic-article.gif 

Run App

通過Android Studio就可以直接在模擬器上安裝App了，當(dāng)然，前提是你要先配置好模擬器。

如果修改了代碼，就可以直接通過熱加載，直接顯示修改的內(nèi)容，無需重新安裝打開，大大節(jié)省了調(diào)試時(shí)間。

總結(jié)

• Flutter的對于熟悉Java或者Android開發(fā)的人來說，還是比較友好的，可以比較快的熟悉和掌握基本的開發(fā)工具和開發(fā)理念；
• Flutter App的性能確實(shí)還是不錯(cuò)的，整個(gè)的體驗(yàn)與原生App基本差不多；
• 熱加載非常好用，可以節(jié)省不少時(shí)間；
• 支持?jǐn)?shù)據(jù)和狀態(tài)自動綁定，通過setState可以非常方便的修改頁面狀態(tài)；
• Flutter 布局嵌套非常坑爹，布局復(fù)雜將會非常痛苦；
• 基本上實(shí)現(xiàn)Android和iOS一套代碼通用，開發(fā)效率大大提高了。
• 仍然有許多需要改進(jìn)的地方，許多特性支持也不太好，如webview這些需要使用第三方插件，或自己定制。

現(xiàn)在Flutter仍然為Beta版本，希望后面可以帶來更多驚喜和更好的體驗(yàn)吧。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18380.html