Flutter初探分析

納蘭寒明發表於2019-01-22
Flutter

2018 12.06

最新訊息

Flutter在12月5號釋出了最新的穩定版本1.0,象徵著Flutter新技術提上了征程，期待著他能靠一己之力改變移動端開的格局！ Flutter1.0官方推文

Let's go

以下為正文，推薦官網APIFlutter，如果覺l得英文看著費勁Flutter中文網，但是其更新速度比官網慢一下，我在寫的時候還沒有更新到1.0版本。

引言

移動端至少分為3大格局，Android開發，iOS開發和React Native開發。React Native將iOS和Android的開發平臺相互融合通過js直譯器構建，完成開發一次，兩端都能使用的技術方案。但是React Native技術是FaceBook開發的，拋開技術性問題不談，其開源型別非BSD專案，FaceBook還是對其擁有控制權，所以大公司都摒棄了React native的開發。（具體協議可自行檢視）。

簡介

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的。（除非特別說明，其開源協議是BSD模式）

歷程

歷程.png

環境構建

(筆者為android開發，只細談安卓方向)

  • FlutterSDK1.0 、AndroidSDK、jdk8.0、Dart外掛
  • Android studio 、IDE、VS Code等任何編輯器
    Android Studio編譯.png

構建方式

Flutter與用於構建移動應用程式的其他大多數框架不同，因為Flutter既不使用WebView，也不使用作業系統的原生控制元件。相反，Flutter使用自己的高效能渲染引擎來繪製介面

Flutter架構層級.png

Flutter中使用輕量的C++構建底層，使用Dart語言開發編譯，使用Skia 2D渲染引擎渲染自己的weight控制元件。

Flutter技術要點

1.widget

簡單的可以理解為view，整個Flutter應用都是使用的widget樹構建UI，在構建過程中使用不同的widget控間巢狀來實現介面。 1).StatelessWidget 沒有狀態的組建，StatelessWidget建立一次，永遠不會改變其外觀，在build中搭建widget樹佈局。

StatelessWidget.png
2).StatefulWidget 根據收到的資料或yoghurt輸入動態更改狀態，creatState中建立一個State物件，而其State物件存在生命週期，可以進行setState操作動態更新介面的顯示。
StatefulWidget.png

State存在生命週期如下：

state生命週期.png
其中reassemble:是在開發中的熱更新才會呼叫的生命週期，這是與rn不同的地方。

2.實現網路載入

使用http請求，呼叫dio第三方庫獲取資料渲染到介面中，使用async await返回Future物件。

3.與原生互動（Android）

Android中：

public class FlutterToNative implements MethodChannel.MethodCallHandler {
    public static String NAME = "com.kang.economicanalysis/plugin";
    private Activity activity;

    FlutterToNative(Activity activity){
        this.activity = activity;
    }

    public static void registerWidth(PluginRegistry.Registrar registrar){
        MethodChannel channel = new MethodChannel(registrar.messenger(), NAME);
        FlutterToNative instance = new FlutterToNative(registrar.activity());
        //setMethodCallHandler在此通道上接收方法呼叫的回撥
        channel.setMethodCallHandler(instance);
    }

    @Override
    public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
        //通過MethodCall可以獲取引數和方法名，然後再尋找對應的平臺業務，本案例做了2個跳轉的業務

        //接收來自flutter的指令oneAct
        if (methodCall.method.equals("ToOne123")) {

            //跳轉到指定Activity
            Intent intent = new Intent(activity, OneActivity.class);
            activity.startActivity(intent);

            //返回給flutter的引數
            result.success("success");
        }
        //接收來自flutter的指令twoAct
        else if (methodCall.method.equals("ToOne")) {

            //解析引數
            String text = methodCall.argument("flutter");

            //帶引數跳轉到指定Activity
            Intent intent = new Intent(activity, OneActivity.class);
            intent.putExtra("flutter", text);
            activity.startActivity(intent);

            //返回給flutter的引數
            result.success("從原生傳回來的引數");
        }
        else {
            result.notImplemented();
        }
    }
}
複製程式碼

在MainActivity中進行呼叫：

public class MainActivity extends FlutterActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    GeneratedPluginRegistrant.registerWith(this);
    //互動
    FlutterToNative.registerWidth(registrarFor(FlutterToNative.NAME));
  }
}
複製程式碼

flutter程式碼中：

//獲取到外掛與原生的互動通道
  static const jumpPlugin = const MethodChannel('com.kang.economicanalysis/plugin');
複製程式碼
//原生互動傳遞值，獲取返回值SetState更新到UI中
Future<Null> _ToNative() async {
    Map<String, String> map = { "flutter": "flutter" };
    String result = await jumpPlugin.invokeMethod('ToOne', map);
    setState(() {
      _data = result;
    });
  }
複製程式碼

這樣就結束了！ 在Flutter中使用的是通道的方式構建與原聲的互動，通道建立完畢後隨時呼叫，隨時通訊，還可以使用這種方式擴充控制元件，例如：flutter不支援webview，可以使用Android原生的webview通過addContentView()，新增到Flutter使用。flutter-webview

底層架構對比

React Native使用js語言開發，形式模仿React框架，執行需要js直譯器，UI通過原生控制元件渲染。

React Native.png
Flutter直接使用原生的canvas，在其自帶的Skia 2D引擎上渲染UI，不通過間接轉換，節省時間
Flutter.png

與React Native對比

1.開發差異：

  • 基於js的ES6開發，遵循react前端框架開發
  • 使用Dart語言開發，純物件導向開發，使用widget搭建佈局

2.友好性：

  • Flutter對Android友好
  • React Native對iOS友好

3.控制元件影響

  • Flutter控制元件是由自己定義的，所以其渲染速度十分快速，
  • Flutter的控制元件在iOS和Android上的效果基本完全一致，而React Native存在將RN控制元件轉換為原生控制元件的過程，存在一定的差異。
  • 在Android和iOS的控制元件發生更新後需要將更新同時更新到Flutter的控制元件中，由於是一家公司，所以Android控制元件容易更新，然而iOS控制元件的更新可能較慢。

4.效率：

  • Flutter的渲染UI效率較高，重新整理率高，FPS較高。

5.動態化：

  • Flutter目前不支援程式碼的熱更新，但是開發者給出思路（Dart to JS）
  • React Native載入jsbundle檔案，目前存在多種熱更新方案。

6.App體積：

  • iOS Flutter>React Native (iOS需要額外整合skia引擎，而android自帶)
  • Android Flutter<React Native (Android中加入OkHttp導致體積增大)
  • Flutter預覽版更新後App體積再次縮小30%

7.平板適配性：

  • Flutter沒有對平板進行適配

8.相容性：

  • Flurrer提供的widget都是基於skia引擎實現和精心定製的，與具體平臺沒有關係，所以能保持很高的跨OS跨OS Version的相容性。flutter從更基礎的曾磨平了平臺的差異，站在更寬廣、更可控的一個基礎平臺上去演變和發展。

9.穩定性：

  • Flutter才出現穩定1.0版本，而RN已經出來3年了，所以React Native的穩定性更好

其他

  • '_'代表私有，可修飾成員和類
  • 使用Router和Navigator實現路由導航（push/pop, eg:pushAndRemoveUtil == SingleTask）
  • 支援動畫、手勢、暫不支援Echarts
  • 打包形式與原生相同
  • colors 只支援16進位制
  • 資原始檔需要在配置檔案pubspec.yaml中引用方可使用

總結

  • 總體上來說，Flutter的技術比React Native技術更加新穎，效能更好，渲染速度更快，各方面都更加優秀，而且Flutter的開源模式為BSD，也優於React Native。
  • Flutter出來的時間只有1年，所以不是很成熟，穩定性較差，所以如何選擇就看你們了！

相關文章