歡迎您光臨深圳塔燈網絡科技有限公司!
          電話圖標 余先生:13699882642

          網站百科

          為您解碼網站建設的點點滴滴

          Flutter初探分析

          發表日期:2018-12 文章編輯:小燈 瀏覽次數:4386

          最新消息

          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.cjxv.cn/18378.html
          相關APP開發
           八年  行業經驗

          多一份參考,總有益處

          聯系深圳網站公司塔燈網絡,免費獲得網站建設方案及報價

          咨詢相關問題或預約面談,可以通過以下方式與我們聯系

          業務熱線:余經理:13699882642

          Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.    

          主站蜘蛛池模板: 久久精品欧美一区二区| 加勒比色综合久久久久久久久| 97影院在线午夜| 娇小xxxxx性开放| 久久99精品久久久久婷婷| 日韩视频免费观看| 亚洲国产视频一区| 波多野结衣大战黑鬼101| 免费在线视频a| 精品国产福利在线观看| 国产乱人视频在线观看播放器| 国产网站麻豆精品视频| 国产精品久久久久电影| 4399理论片午午伦夜理片| 在线播放五十路乱中文| china成人快色| 女让张开腿让男人桶视频| 中文免费观看视频网站| 日产精品99久久久久久| 久久国产精品一国产精品| 最近2019中文字幕无吗| 亚洲伊人久久网| 欧美性猛交xxxx乱大交丰满| 亚洲欧美精品一区二区| 波多野结衣www| 亚洲色婷婷一区二区三区| 狼群影院www| 伊人久久综在合线亚洲91| 看AV免费毛片手机播放| 全高清特级毛片| 精品久久久久久无码中文野结衣| 午夜精品久久久久久久无码| 美女大量吞精在线观看456| 国产 欧洲韩国野花视频| 萍萍偷看邻居海员打屁股| 粉嫩虎白女m3n8视频| 国产一区二区不卡| 英国性经典xxxx| 国产一级二级在线观看| 色婷五月综激情亚洲综合| 国产三级精品三级男人的天堂 |