標題: 安卓最新跨平臺跨平臺架構(gòu)介紹 [打印本頁]
作者: yearno    時間: 2019-3-17 17:36
標題: 安卓最新跨平臺跨平臺架構(gòu)介紹
1、Flutter誕生的原因
跨平臺工具包歷來采用以下兩種方法之一：
將 Web 視圖包裝在本機應用程序中，并將應用程序構(gòu)建為網(wǎng)頁。
包裝原生平臺控件并提供對它們的一些跨平臺抽象。
Flutter 采取不同的方法，試圖使移動開發(fā)更好。 它提供了一個開發(fā)人員使用的應用程序框架和一個可移植的運行時引擎。該框架建立在 Skia 圖形庫上，提供實際呈現(xiàn)的部件，而不僅僅是原生控件的包裝。
Flutter 做跨平臺開發(fā)能夠像 web 一樣靈活，但同時提供流暢的性能。
Flutter 附帶的部件庫以及開源部件使其成為一個功能豐富的平臺。簡單地說，F(xiàn)lutter 是最接近移動開發(fā)人員用于跨平臺開發(fā)的理想平臺，靈活性、性能幾乎毫無妥協(xié)。
Flutter 使用谷歌開發(fā)的 Dart 語言進行開發(fā)。 Dart 是一種面向?qū)ο蟮恼Z言，同時支持提前編譯和即時編譯，非常適合用于構(gòu)建本地應用程序，同時 Flutter 的熱加載有效的提高了開發(fā)效率。 Flutter 最近也轉(zhuǎn)向了 Dart 2.0 版本。
Dart 提供了許多其他語言中的功能，包括垃圾回收，異步，強類型，泛型以及豐富的標準庫。
2、跨平臺框架的發(fā)展史1、使用WebApp的一些框架1、Ruby on Rails
2、AngularJS
3、JQuery Mobile
4、Cordova
5、PWA
6、Instant App
優(yōu)勢：
一套HTML5APP 即可同時適用iOS、Android平臺，適配性和體驗較好。
版本服務器更新，用戶永遠看到的是最新APP端的信息。
技術(shù)難度較低，開發(fā)工作量小，開發(fā)成本低。
劣勢：
用戶體驗大幅落后于原生APP，操作的流暢度，程序的執(zhí)行效率，與原生APP都有較大差距；
HTML5 APP 受網(wǎng)速的影響較大，在網(wǎng)絡情況較差的情況下，HTML5 APP 往往連打開都困難，而原生程序，基本都能順利打開運行（只是速度較慢）。
2、 適合移動端App的一些框架1、React Native
特點：Facebook 出品的一個移動端開發(fā)框架，可以最大限度的接近原生框架，就能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開發(fā)體驗，構(gòu)建原生App，僅需學習一次，編寫任何平臺。（Learn once， write anywhere）
缺點：初次學習成本高，必須不同平臺寫兩套代碼，依賴暴露的接口
2、Weex
特點：weex 能夠完美兼顧性能與動態(tài)性，讓移動開發(fā)者通過簡捷的前端語法寫出Native級別的性能體驗，并支持iOS、Android、YunOS及web等多端部署。
缺點：控件太少，基本只能實現(xiàn)最基本的效果；上手難度打，如果是前段和移動端都懂的話上手很快；隨著項目變大，編譯速度會呈指數(shù)型上升。
3、Flutter
1、免費開源；
2、利用保持狀態(tài)的熱重載（hot reload）、全新的響應式框架、豐富的控件以及集成的開發(fā)工具，這些特點進行快速開發(fā)；
3、通過可組合的控件集合、豐富的動畫庫以及可擴展的框架來實現(xiàn)富有感染力的靈活界面設(shè)計；
4、借助可移植的GPU加速的渲染引擎以及高性能本地ARM代碼運行時以達到跨設(shè)備的高品質(zhì)用戶體驗；
5、提高開發(fā)效率：使用一套代碼同時開發(fā)iOS和Android；
6、可擴展性強：Flutter框架本身提供了豐富的Material Design和Cupertino(iOS-flavor)風格的控件，可自由擴展控件，不受手機平臺控件的限制。
Flutter框架Flutter框架是一個分層的結(jié)構(gòu)，每個層都建立在前一層之上。




image.png

Flutter跨平臺最核心的部分，是它的高性能渲染引擎（Flutter Engine）。Flutter不使用瀏覽器技術(shù)，也不使用Native的原生控件，它使用自己的渲染引擎來繪制widget。
說到widget，就要說一句Flutter的一切皆為widget理念。widget是Flutter應用程序用戶界面的基本構(gòu)建塊。每個widget都是用戶界面一部分的不可變聲明。與其他將視圖、控制器、布局和其他屬性分離的框架不同，F(xiàn)lutter具有一致的統(tǒng)一對象模型：widget。在更新widget的時候，框架能夠更加的高效。
對于Android平臺，F(xiàn)lutter引擎的C/C++代碼是由NDK編譯，在iOS平臺，則是由LLVM編譯，兩個平臺的Dart代碼都是AOT編譯為本地代碼，F(xiàn)lutter應用程序使用本機指令集運行。Flutter正是是通過使用相同的渲染器、框架和一組widget，來同時構(gòu)建iOS和Android應用，而無需維護兩套獨立的代碼庫。




image.png


Flutter將UI組件和渲染器從平臺移動到應用程序中，這使得它們可以自定義和可擴展。Flutter唯一要求系統(tǒng)提供的是canvas，以便定制的UI組件可以出現(xiàn)在設(shè)備的屏幕上。
Flutter安裝  -- #官網(wǎng)鏈接>>> --**


image.png





image.png





image.png





image.png

3、開發(fā)工具Flutter 在開發(fā)工具的選擇上很靈活。 應用程序可以通過命令行以及任何編輯器輕松開發(fā)，這些編輯器來自受支持的 IDE，如 VS Code，Android Studio 或 IntelliJ。 使用哪種 IDE 取決于用戶的偏好。
Android Studio 提供了最多的功能，例如 Flutter Inspector 來分析正在運行的應用程序的窗口部件以及監(jiān)視應用程序性能。 還提供了開發(fā)部件層次結(jié)構(gòu)時很方便的幾個重構(gòu)。
VS Code 提供了更輕松的開發(fā)體驗，因此它的啟動速度往往比 Android Studio / IntelliJ 更快。 每個 IDE 都提供內(nèi)置的編輯助手，如代碼補全，接口定義跳轉(zhuǎn)以及良好的調(diào)試支持。
Flutter 也很好的支持命令行，這使得創(chuàng)建，更新和啟動應用程序變得容易，除了編輯器之外沒有任何其他工具依賴性。
4、熱加載無論采用何種工具，F(xiàn)lutter 都能為應用程序的熱加載提供出色的支持。 這允許在許多情況下修改正在運行的應用程序，維護狀態(tài)，而不必停止應用程序，重新構(gòu)建和重新部署。
5、測試Flutter 包含一個 WidgetTester 實用程序，用于與測試中的部件進行交互。 新的應用程序模板包含一個示例測試，用于演示在創(chuàng)建測試時如何使用它。
6、包管理和插件    pub鏈接Flutter 已經(jīng)有了一個豐富的開發(fā)者生態(tài)系統(tǒng)：開發(fā)人員已有大量可以使用的包和插件。
要添加包或插件，只需在應用程序的根目錄下的 pubspec.yaml 文件中包含依賴項即可。 然后從命令行或 IDE 運行 flutter packages get，F(xiàn)lutter 的工具將引入所有必需的依賴關(guān)系。
要將流行的圖像選擇器插件用于 Flutter，只需在 pubspec.yaml 中將其列為依賴項
然后運行 flutter packages get 拉取所有依耐項，然后可以在 Dart 中導入和使用它




image.png

6、部件Flutter 里的所有東西都是一個一個的部件。 這包括用戶界面元素，例如 ListView，TextBox 和 Image，以及框架的其他部分，包括布局，動畫，手勢識別和主題等。
通過將所有內(nèi)容都設(shè)置為窗口部件，整個應用程序可以在窗口部件層次結(jié)構(gòu)中表示。 擁有一個所有內(nèi)容都是部件的架構(gòu)，可以清楚地了解作用于某一部分的屬性和行為的來源。 這與大多數(shù)其他應用程序框架不同，它們將屬性和行為不一致地關(guān)聯(lián)起來，有時將屬性和行為從層次結(jié)構(gòu)中的其他組件附加到控件本身，有時自身控制屬性和行為。
7、運行第一個Flutter應用


image.png





image.png

部件示例Flutter 應用程序的入口點是 main 函數(shù)。 要在屏幕上放置用戶界面元素的部件，在 main（）中調(diào)用 runApp（）并將部件層次結(jié)構(gòu)根部的部件作為參數(shù)傳遞。




image.png

無狀態(tài) VS 有狀態(tài)部件有兩種形式：無狀態(tài)和有狀態(tài)。 無狀態(tài)部件在創(chuàng)建和初始化后不會更改它們的內(nèi)容，而有狀態(tài)部件維護一些程序運行時可變的狀態(tài)，例如，響應用戶交互。




image.png


在實例中無狀態(tài)的Widget繼承自StatelessWidget，其初始化之后，不會更改內(nèi)部內(nèi)容。
有狀態(tài)的Widget繼承自StatefulWidge,有狀態(tài)的部件返回一個負責為給定狀態(tài)構(gòu)建部件樹的 State 類。 狀態(tài)更改時，將重建窗口部件樹的關(guān)聯(lián)部分。通過setState（）方法改變部件狀態(tài)。狀態(tài)在傳遞給 setState（）的函數(shù)中更新。 當調(diào)用 setState（）時，該函數(shù)可以設(shè)置任何內(nèi)部狀態(tài)。

作者: 15837397362    時間: 2019-4-13 09:50
aaaaaaaaa
作者: 小七七七    時間: 2019-4-14 17:05
感謝分享



歡迎光臨 (http://www.torrancerestoration.com/bbs/) Powered by Discuz! X3.1