開始之前
本人使用Flutter開發的一個圖文App《每日圖文》,可以同時運行在Android和iOS上,歡迎體驗,喜歡的話還不吝Star一下。
叮叮叮~ 傳送門
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中無法在線安裝,可以到以下鏈接中下載離線安裝:
注意下載的插件版本一定要和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.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
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版本,希望後面可以帶來更多驚喜和更好的體驗吧。