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

時間 2019-11-16

標籤 flutter 嚐鮮跨平臺移動應用開發欄目無線简体版

原文原文鏈接

開始以前

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

叮叮叮～傳送門ios

Flutter爲什麼物？

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

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

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

Flutter編程語言

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

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

Dart雖然是一門動態語言，可是像極了Java，做爲一名Android開發者，幾乎能夠無縫切換，跟Kotlin也有幾分類似。相比Java，Dart更爲簡潔。bash

具體能夠到Dart語言中文社區瞭解學習。架構

Flutter特色

支持熱加載，運行以後，修改代碼無需從新安裝和啓動，提高開發調試效率
支持數據狀態綁定，修改數據後自動刷新頁面
全部的UI都是Widget，包括頁面

Flutter環境配置

首先clone Flutter的repoapp

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
複製代碼