安卓最新跨平臺(tái)跨平臺(tái)架構(gòu)介紹

ID:492666 · 發(fā)表于 2019-3-17 17:36

1、Flutter誕生的原因
跨平臺(tái)工具包歷來(lái)采用以下兩種方法之一：
將 Web 視圖包裝在本機(jī)應(yīng)用程序中，并將應(yīng)用程序構(gòu)建為網(wǎng)頁(yè)。
包裝原生平臺(tái)控件并提供對(duì)它們的一些跨平臺(tái)抽象。
Flutter 采取不同的方法，試圖使移動(dòng)開(kāi)發(fā)更好。它提供了一個(gè)開(kāi)發(fā)人員使用的應(yīng)用程序框架和一個(gè)可移植的運(yùn)行時(shí)引擎。該框架建立在 Skia 圖形庫(kù)上，提供實(shí)際呈現(xiàn)的部件，而不僅僅是原生控件的包裝。
Flutter 做跨平臺(tái)開(kāi)發(fā)能夠像 web 一樣靈活，但同時(shí)提供流暢的性能。
Flutter 附帶的部件庫(kù)以及開(kāi)源部件使其成為一個(gè)功能豐富的平臺(tái)。簡(jiǎn)單地說(shuō)，F(xiàn)lutter 是最接近移動(dòng)開(kāi)發(fā)人員用于跨平臺(tái)開(kāi)發(fā)的理想平臺(tái)，靈活性、性能幾乎毫無(wú)妥協(xié)。
Flutter 使用谷歌開(kāi)發(fā)的 Dart 語(yǔ)言進(jìn)行開(kāi)發(fā)。 Dart 是一種面向?qū)ο蟮恼Z(yǔ)言，同時(shí)支持提前編譯和即時(shí)編譯，非常適合用于構(gòu)建本地應(yīng)用程序，同時(shí) Flutter 的熱加載有效的提高了開(kāi)發(fā)效率。 Flutter 最近也轉(zhuǎn)向了 Dart 2.0 版本。
Dart 提供了許多其他語(yǔ)言中的功能，包括垃圾回收，異步，強(qiáng)類(lèi)型，泛型以及豐富的標(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ù)器更新，用戶(hù)永遠(yuǎn)看到的是最新APP端的信息。
技術(shù)難度較低，開(kāi)發(fā)工作量小，開(kāi)發(fā)成本低。
劣勢(shì)：
用戶(hù)體驗(yàn)大幅落后于原生APP，操作的流暢度，程序的執(zhí)行效率，與原生APP都有較大差距；
HTML5 APP 受網(wǎng)速的影響較大，在網(wǎng)絡(luò)情況較差的情況下，HTML5 APP 往往連打開(kāi)都困難，而原生程序，基本都能順利打開(kāi)運(yùn)行（只是速度較慢）。
2、適合移動(dòng)端App的一些框架1、React Native
特點(diǎn)：Facebook 出品的一個(gè)移動(dòng)端開(kāi)發(fā)框架，可以最大限度的接近原生框架，就能夠在Javascript和React的基礎(chǔ)上獲得完全一致的開(kāi)發(fā)體驗(yàn)，構(gòu)建原生App，僅需學(xué)習(xí)一次，編寫(xiě)任何平臺(tái)。（Learn once， write anywhere）
缺點(diǎn)：初次學(xué)習(xí)成本高，必須不同平臺(tái)寫(xiě)兩套代碼，依賴(lài)暴露的接口
2、Weex
特點(diǎn)：weex 能夠完美兼顧性能與動(dòng)態(tài)性，讓移動(dòng)開(kāi)發(fā)者通過(guò)簡(jiǎn)捷的前端語(yǔ)法寫(xiě)出Native級(jí)別的性能體驗(yàn)，并支持iOS、Android、YunOS及web等多端部署。
缺點(diǎn)：控件太少，基本只能實(shí)現(xiàn)最基本的效果；上手難度打，如果是前段和移動(dòng)端都懂的話上手很快；隨著項(xiàng)目變大，編譯速度會(huì)呈指數(shù)型上升。
3、Flutter
1、免費(fèi)開(kāi)源；
2、利用保持狀態(tài)的熱重載（hot reload）、全新的響應(yīng)式框架、豐富的控件以及集成的開(kāi)發(fā)工具，這些特點(diǎn)進(jìn)行快速開(kāi)發(fā)；
3、通過(guò)可組合的控件集合、豐富的動(dòng)畫(huà)庫(kù)以及可擴(kuò)展的框架來(lái)實(shí)現(xiàn)富有感染力的靈活界面設(shè)計(jì)；
4、借助可移植的GPU加速的渲染引擎以及高性能本地ARM代碼運(yùn)行時(shí)以達(dá)到跨設(shè)備的高品質(zhì)用戶(hù)體驗(yàn)；
5、提高開(kāi)發(fā)效率：使用一套代碼同時(shí)開(kāi)發(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的原生控件，它使用自己的渲染引擎來(lái)繪制widget。
說(shuō)到widget，就要說(shuō)一句Flutter的一切皆為widget理念。widget是Flutter應(yīng)用程序用戶(hù)界面的基本構(gòu)建塊。每個(gè)widget都是用戶(hù)界面一部分的不可變聲明。與其他將視圖、控制器、布局和其他屬性分離的框架不同，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正是是通過(guò)使用相同的渲染器、框架和一組widget，來(lái)同時(shí)構(gòu)建iOS和Android應(yīng)用，而無(wú)需維護(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、開(kāi)發(fā)工具Flutter 在開(kāi)發(fā)工具的選擇上很靈活。應(yīng)用程序可以通過(guò)命令行以及任何編輯器輕松開(kāi)發(fā)，這些編輯器來(lái)自受支持的 IDE，如 VS Code，Android Studio 或 IntelliJ。使用哪種 IDE 取決于用戶(hù)的偏好。
Android Studio 提供了最多的功能，例如 Flutter Inspector 來(lái)分析正在運(yùn)行的應(yīng)用程序的窗口部件以及監(jiān)視應(yīng)用程序性能。還提供了開(kāi)發(fā)部件層次結(jié)構(gòu)時(shí)很方便的幾個(gè)重構(gòu)。
VS Code 提供了更輕松的開(kāi)發(fā)體驗(yàn)，因此它的啟動(dòng)速度往往比 Android Studio / IntelliJ 更快。每個(gè) IDE 都提供內(nèi)置的編輯助手，如代碼補(bǔ)全，接口定義跳轉(zhuǎn)以及良好的調(diào)試支持。
Flutter 也很好的支持命令行，這使得創(chuàng)建，更新和啟動(dòng)應(yīng)用程序變得容易，除了編輯器之外沒(méi)有任何其他工具依賴(lài)性。
4、熱加載無(wú)論采用何種工具，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è)豐富的開(kāi)發(fā)者生態(tài)系統(tǒng)：開(kāi)發(fā)人員已有大量可以使用的包和插件。
要添加包或插件，只需在應(yīng)用程序的根目錄下的 pubspec.yaml 文件中包含依賴(lài)項(xiàng)即可。然后從命令行或 IDE 運(yùn)行 flutter packages get，F(xiàn)lutter 的工具將引入所有必需的依賴(lài)關(guān)系。
要將流行的圖像選擇器插件用于 Flutter，只需在 pubspec.yaml 中將其列為依賴(lài)項(xiàng)
然后運(yùn)行 flutter packages get 拉取所有依耐項(xiàng)，然后可以在 Dart 中導(dǎo)入和使用它

image.png

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

image.png

image.png

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

image.png

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

image.png

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

ID:506760 · 發(fā)表于 2019-4-13 09:50

aaaaaaaaa

ID:511752 · 發(fā)表于 2019-4-14 17:05

感謝分享

帳號(hào)		自動(dòng)登錄	找回密碼
密碼			立即注冊(cè)