最新消息

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

Let’s go

以下為正文，推薦官網APIFlutter，如果覺l得英文看著費勁[Flutter中文網(https://flutterchina.club/)，但是其更新速度比官網慢一下，我在寫的時候還沒有更新到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體積：

• iOSFlutter>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年，所以不是很成熟，穩定性較差，所以如何選擇就看你們了！

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/18378.html