開(kāi)始之前

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

叮叮叮～ 傳送門(mén)

demo.gif

Flutter為何物？

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

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

目前還處于測(cè)試版本階段：Beta 3。

Flutter編程語(yǔ)言

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

想必還是很多人都沒(méi)聽(tīng)說(shuō)過(guò)這門(mén)語(yǔ)言吧，原諒我也沒(méi)聽(tīng)過(guò)。沒(méi)想到如今Dart以這樣的形式再次出現(xiàn)在開(kāi)發(fā)者面前。

Dart雖然是一門(mén)動(dòng)態(tài)語(yǔ)言，但是像極了Java，作為一名Android開(kāi)發(fā)者，幾乎可以無(wú)縫切換，跟Kotlin也有幾分相似。相比Java，Dart更為簡(jiǎn)潔。

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

Flutter特點(diǎn)

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

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 //國(guó)內(nèi)用戶(hù)需要設(shè)置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國(guó)內(nèi)用戶(hù)需要設(shè)置 export PATH=`pwd`/flutter/bin:$PATH 

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

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 //國(guó)內(nèi)用戶(hù)需要設(shè)置 export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //國(guó)內(nèi)用戶(hù)需要設(shè)置 export PATH= PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH 

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

source $HOME/.bash_profile 

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

Flutter開(kāi)發(fā)工具配置

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

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

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

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

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

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

模擬器配置

Android Studio支持Android模擬器和iPhone模擬器預(yù)覽，具體安裝參見(jiàn)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)來(lái)看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()方法中。接下來(lái)，就來(lái)理清一下這個(gè)簡(jiǎn)單的代碼。

Flutter頁(yè)面架構(gòu)

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

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

UI布局和控件

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

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

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

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

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

頁(yè)面控件：StatelessWidget 和 StatefulWidget

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

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

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

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è)類(lèi)繼承了State。

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

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

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

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

Flutter插件管理

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

name: daily description: A application to look up photo and article#依賴(lài)插件配置 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

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

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

總結(jié)

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

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

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