最新消息

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

Let’s go

以下為正文，推薦官網(wǎng)APIFlutter，如果覺l得英文看著費勁[Flutter中文網(wǎng)(https://flutterchina.club/)，但是其更新速度比官網(wǎng)慢一下，我在寫的時候還沒有更新到1.0版本。

引言

移動端至少分為3大格局，Android開發(fā)，iOS開發(fā)和React Native開發(fā)。React Native將iOS和Android的開發(fā)平臺相互融合通過js解釋器構(gòu)建，完成開發(fā)一次，兩端都能使用的技術(shù)方案。但是React Native技術(shù)是FaceBook開發(fā)的，拋開技術(shù)性問題不談，其開源類型非BSD項目，F(xiàn)aceBook還是對其擁有控制權(quán)，所以大公司都摒棄了React native的開發(fā)。（具體協(xié)議可自行查看）。

簡介

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費、開源的。（除非特別說明，其開源協(xié)議是BSD模式）

歷程

歷程.png

環(huán)境構(gòu)建

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

• FlutterSDK1.0 、AndroidSDK、jdk8.0、Dart插件

• Android studio 、IDE、VS Code等任何編輯器

  
  Android Studio編譯.png

構(gòu)建方式

Flutter與用于構(gòu)建移動應(yīng)用程序的其他大多數(shù)框架不同，因為Flutter既不使用WebView，也不使用操作系統(tǒng)的原生控件。相反，F(xiàn)lutter使用自己的高性能渲染引擎來繪制界面

Flutter架構(gòu)層級.png

Flutter中使用輕量的C++構(gòu)建底層，使用Dart語言開發(fā)編譯，使用Skia 2D渲染引擎渲染自己的weight控件。

Flutter技術(shù)要點

1.widget

簡單的可以理解為view，整個Flutter應(yīng)用都是使用的widget樹構(gòu)建UI，在構(gòu)建過程中使用不同的widget控間嵌套來實現(xiàn)界面。
1).StatelessWidget
沒有狀態(tài)的組建，StatelessWidget創(chuàng)建一次，永遠不會改變其外觀，在build中搭建widget樹布局。

StatelessWidget.png

2).StatefulWidget
根據(jù)收到的數(shù)據(jù)或yoghurt輸入動態(tài)更改狀態(tài)，creatState中創(chuàng)建一個State對象，而其State對象存在生命周期，可以進行setState操作動態(tài)更新界面的顯示。

StatefulWidget.png

State存在生命周期如下：

state生命周期.png

其中reassemble:是在開發(fā)中的熱更新才會調(diào)用的生命周期，這是與rn不同的地方。

2.實現(xiàn)網(wǎng)絡(luò)加載

使用http請求，調(diào)用dio第三方庫獲取數(shù)據(jù)渲染到界面中，使用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在此通道上接收方法調(diào)用的回調(diào) channel.setMethodCallHandler(instance); }@Override public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) { //通過MethodCall可以獲取參數(shù)和方法名，然后再尋找對應(yīng)的平臺業(yè)務(wù)，本案例做了2個跳轉(zhuǎn)的業(yè)務(wù)//接收來自flutter的指令oneAct if (methodCall.method.equals("ToOne123")) {//跳轉(zhuǎn)到指定Activity Intent intent = new Intent(activity, OneActivity.class); activity.startActivity(intent);//返回給flutter的參數(shù) result.success("success"); } //接收來自flutter的指令twoAct else if (methodCall.method.equals("ToOne")) {//解析參數(shù) String text = methodCall.argument("flutter");//帶參數(shù)跳轉(zhuǎn)到指定Activity Intent intent = new Intent(activity, OneActivity.class); intent.putExtra("flutter", text); activity.startActivity(intent);//返回給flutter的參數(shù) result.success("從原生傳回來的參數(shù)"); } else { result.notImplemented(); } } } 

在MainActivity中進行調(diào)用：

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; }); } 

這樣就結(jié)束了！
在Flutter中使用的是通道的方式構(gòu)建與原聲的交互，通道建立完畢后隨時調(diào)用，隨時通信，還可以使用這種方式拓展控件，例如：flutter不支持webview，可以使用Android原生的webview通過addContentView()，添加到Flutter使用。flutter-webview

底層架構(gòu)對比

React Native使用js語言開發(fā)，形式模仿React框架，執(zhí)行需要js解釋器，UI通過原生控件渲染。

React Native.png

Flutter直接使用原生的canvas，在其自帶的Skia 2D引擎上渲染UI，不通過間接轉(zhuǎn)換，節(jié)省時間

Flutter.png

與React Native對比

1.開發(fā)差異：

• 基于js的ES6開發(fā)，遵循react前端框架開發(fā)
• 使用Dart語言開發(fā)，純面向?qū)ο箝_發(fā)，使用widget搭建布局

2.友好性：

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

3.控件影響

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

4.效率：

• Flutter的渲染UI效率較高，刷新率高，F(xiàn)PS較高。

5.動態(tài)化：

• Flutter目前不支持代碼的熱更新，但是開發(fā)者給出思路（Dart to JS）
• React Native加載jsbundle文件，目前存在多種熱更新方案。

6.App體積：

• iOSFlutter>React Native (iOS需要額外集成skia引擎，而android自帶)
• Android Flutter<React Native (Android中加入OkHttp導(dǎo)致體積增大)
• Flutter預(yù)覽版更新后App體積再次縮小30%

7.平板適配性：

• Flutter沒有對平板進行適配

8.兼容性：

• Flurrer提供的widget都是基于skia引擎實現(xiàn)和精心定制的，與具體平臺沒有關(guān)系，所以能保持很高的跨OS跨OS Version的兼容性。flutter從更基礎(chǔ)的曾磨平了平臺的差異，站在更寬廣、更可控的一個基礎(chǔ)平臺上去演變和發(fā)展。

9.穩(wěn)定性：

• Flutter才出現(xiàn)穩(wěn)定1.0版本，而RN已經(jīng)出來3年了，所以React Native的穩(wěn)定性更好

其他

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

總結(jié)

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

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/18378.html