開始之前

本人使用Flutter開發的一個圖文App《每日圖文》，可以同時運行在Android和iOS上，歡迎體驗，喜歡的話還不吝Star一下。

叮叮叮～ 傳送門

demo.gif

Flutter為何物？

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

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

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

Flutter編程語言

Flutter使用的編程語言是Dart，Dart是一門動態語言，幾年前揚言要替換JavaScript地位，結果可想而知。

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

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

具體可以到Dart語言中文社區了解學習。

Flutter特點

• 支持熱加載，運行之后，修改代碼無需重新安裝和啟動，提升開發調試效率
• 支持數據狀態綁定，修改數據后自動刷新頁面
• 所有的UI都是Widget，包括頁面

Flutter環境配置

首先clone Flutter的repo

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

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

flutter doctor 

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

$HOME/.bash_profile 

在.bash_profile文件添加以下環境變量：

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

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

最后運行來生效當前命令行窗口：

source $HOME/.bash_profile 

更多平臺配置可到【Flutter中文網】了解

Flutter開發工具配置

Flutter App可以使用VS Code、Android Studio、IntelliJ進行開發。我直接用的Android Studio。

開始之前，你需要安裝兩個插件：

• Flutter插件： 支持Flutter開發工作流 (運行、調試、熱重載等).
• Dart插件： 提供代碼分析 (輸入代碼時進行驗證、代碼補全等).

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

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

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

模擬器配置

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

新建Flutter App工程

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

新建工程

工程目錄如下：

工程目錄

可以看到，工程目錄結構主要分為3部分，分別是：

• android 存放Android相關的東西，如App圖標
• ios 存放iOS相關的東西，如App圖標
• lib 存放Flutter源碼

重點來看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'), ), ), ); } } 

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

Flutter頁面架構

App開發最重要的就是UI框架，Flutter重新定制一套自己的UI框架，在底層使用了Skia進行渲染。

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

UI布局和控件

從main.dart中可以看到，Flutter的布局是一層一層嵌套形成的。

• 第一層是Scaffold，一個實現了Material design的布局控件，包含了一個AppBar和一個body，分別對應標題欄和頁面。

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

• 最后的子布局是一個Text控件。

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

頁面控件：StatelessWidget 和 StatefulWidget

MyApp繼承的StatelessWidget，就是其中一個頁面相關的Widget，這個窗口的特點是靜態，頁面中的數據一旦渲染后，就不能在更改，一般用于顯示靜態頁面。

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

一個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的業務邏輯基本上都在_MyHomePageState中，這個類繼承了State。

當點擊了FloatingActionButton時，就會調用_incrementCounter()方法進行setState()，頁面就會跟著改變了。

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

由于Flutter的布局模式，當頁面比較復雜時，整個布局會變得非常復雜，可讀性也大大降低了，修改起來非常麻煩。

另外，Flutter為了布局靈活性，定義了太多的布局控件，幾十個布局看得眼花繚亂，從來沒見過這么多布局的框架。

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了，當然，前提是你要先配置好模擬器。

如果修改了代碼，就可以直接通過熱加載，直接顯示修改的內容，無需重新安裝打開，大大節省了調試時間。

總結

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

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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://m.cjxv.cn/18380.html