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




image.png

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




image.png


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


image.png





image.png





image.png





image.png

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




image.png

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


image.png





image.png

部件示例Flutter 應(yīng)用程序的入口點(diǎn)是 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)建和初始化后不會(huì)更改它們的內(nèi)容，而有狀態(tài)部件維護(hù)一些程序運(yùn)行時(shí)可變的狀態(tài)，例如，響應(yīng)用戶交互。




image.png


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

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



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