Flutter嚐鮮：跨平臺移動應用開發

開發的貓發表於2018-06-06
Flutter

Flutter嚐鮮：跨平臺移動應用開發

開始之前

本人使用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中無法線上安裝，可以到以下連結中下載離線安裝：

注意下載的外掛版本一定要和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版本，希望後面可以帶來更多驚喜和更好的體驗吧。

相關文章