初識flutter

flutter是Google開發的一套全新的跨平臺開源框架。目前flutter已經發布不少不少版本，正在逐步的完善，它的目標實際上是和react native同樣的，就是同一份代碼能夠同時運行在Android和iOS兩個系統上。若是你同時有react native和flutter開發經驗，你就會發現flutter的不少設計理念和react native是同樣的，react native基於組件開發頁面，flutter則是widget，他們都有本身的生命週期，他們都是本身的屬性或者狀態，因此對於react native開發者來講，flutter開發只不過換了一種Dart語言，換了一批API，固然這些都是表面的理解。由於react native和flutter有本質的不一樣，react native渲染的是系統原生控件，flutter則是從頭至尾重寫了一套UI框架，渲染引擎則依靠Skia圖形庫實現。下面就具體說一下H五、react native、flutter這些跨平臺UI框架的方案。

 

H五、react native、flutter

最開始的跨平臺開發的方案就是H5開發，而後基於Android和iOS的webView徹底繼承web開發的全部成果，可是因爲webview的渲染效率和js的執行性能問題，很難與原生相提並論。而後就到了react native、weex的時代，爲了解決webview性能差的問題，這類框架將最終的渲染工做交還給了系統，拋開react native和weex自身對系統版本的bug，性能問題依然沒有完美的解決，好比加載react native生成的bundle.js的size過大、bundle.js的加載時間過長致使白屏、頁面內手勢滑動致使大量的丟幀問題等等，因此咱們在適用reactnative時仍是須要大量的優化和維護。這個時候flutter借鑑react native孕育而生，爲何是借鑑呢，上面也有提到，其實react native在開發時有不少思想都是相同的。

flutter所使用的語言是Dart，這種語言既支持動態編譯又支持靜態編譯，這也就意味着在JIT模式下咱們能夠實現熱刷新，就像開發js同樣，編輯完代碼以後，只要保存或者點擊 Hot Reload按鈕，就能夠當即更新到設備上，不用從新編譯app。在Flutter中，全部功能均可以經過組合多個Widget來實現，包括對齊方式、按行排列、按列排列、網格排列甚至事件處理等等。Flutter控件主要分爲兩大類，StatelessWidget和StatefulWidget，StatelessWidget用來展現靜態的文本或者圖片，若是控件須要根據外部數據或者用戶操做來改變的話，就須要使用StatefulWidget。State的概念也是來源於Facebook的流行Web框架React，React風格的框架中使用控件樹和各自的狀態來構建界面，當某個控件的狀態發生變化時由框架負責對比先後狀態差別而且採起最小代價來更新渲染結果。

flutter應用

flutter的安裝很簡單，咱們只須要一個flutter的sdk就能夠，這裏相似於Android裏的sdk，開發flutter的編輯器也有不少選擇，Android studio、intellij、VS code，這裏我選擇的是最輕量的vs code。關於這些配置環境咱們能夠參考官網，說的很清晰。

當咱們用vs code生成一個項目後，項目目錄以下：

其中lib文件夾下的main.dart文件就是咱們要開發的dart文件，pubspec.yaml就是項目的配置文件，ios文件夾和android文件夾分別是iOS和Android兩個項目工程

而後咱們看一下dart文件：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

能夠看到兩個類MyApp和MyHomePage，從名字咱們就能夠看出，一個是App的入口，一個是首頁，前者繼承StatelessWidget，後者繼承StatefulWidget，說明MyApp是不須要狀態的，而MyHomePage是須要的，因此它實現了createState方法來生成一個State（不論是StatelessWidget仍是StatefulWidget，自己都是不可變的），_MyHomePageState繼承了State<MyHomePage>，重寫了build方法，返回Scaffold，其實Scaffold中的代碼就是展現在頁面中的內容。

最後附上flutter的架構圖：