Flutter入門-Dart面向?qū)ο笤?/h2>

Dart作為高級語言，支持面向?qū)ο蟮暮芏嗵匦?，并且支持基于mixin的繼承方式，基于mixin的繼承方式是指：一個類可以繼承自多個父類，相當(dāng)于其他語言里的多繼承。所有的類都有同一個基類Object，這和特性類似于Java語言，Java所有的類也都是繼承自O(shè)bject，也就是說一切皆對象。

創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為天寧等服務(wù)建站，天寧等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為天寧企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Dart 是一門面向?qū)ο蟮恼Z言, 全部的類都是繼承自 Object , 除了支持傳統(tǒng)的 繼承、封裝、多態(tài) , 還有基于組合(Mixin-based)的繼承特性

類型推導(dǎo)(var/final/const)

var

final和const的區(qū)別

3.非零即真（ ）

4.字符串

5.集合

Dart中變量初始值為null，即使是int類型也可以是null（java中int默認是0， boolean默認是false）； Dart支持自識別，可以是用var定義變量，也可以直接指定具體類型； final或者const都可修飾不可變的變量，final變量只能賦值一次，const是編譯時常量。

int和double是num子類，沒有float類型； 支持字符串模板，用${expression}的方式來實現(xiàn)字符串效果，類似如字符串拼接； String可以使用單引號或者雙引號； Dart沒有數(shù)組，只有列表； 其中List，Set，Map不是抽象接口，是具體實現(xiàn)類，可直接使用； Map的key沒有指定類型，key類型不一致不會報錯；key不能相同，但是value可以相同，value可以為null。 var name = 'Tom';

方法也是對象，方法可賦值給一個變量； 如果方法的參數(shù)是解構(gòu)出來的可以通過 @required 注解標注為必填 const Scrollbar({Key key, @required Widget child})； 支持可選參數(shù)，可選命名參數(shù)用{}包圍，可選位置參數(shù)寫在最后并且使用[]包圍 String say(String from, String msg, [String device])； 支持默認參數(shù) void enableFlags({bool bold = false, bool hidden = false}) {…}； 以_開頭的方法都是私有的。 void main() {

支持閉包，閉包能夠訪問外部方法內(nèi)部的局部變量

1.空替換?? expr1 ?? expr2，如果expr1是non-null，返回其值。否則執(zhí)行expr2并返回其結(jié)果； 2.條件成員訪問？.P?.y = 4; 如果p是non-null,則設(shè)置y的值等于4； 3.類型判定操作符（as，is，is!）； 4.級聯(lián)操作，可以在同一個對象上連續(xù)調(diào)用多個函數(shù)以及訪問成員變量；

和java不同的是，Dart可以拋出任意類型的對象； 程序不會強制要求開發(fā)中處理異常，但若發(fā)生異常，程序會中斷； 其中異常主要分為Error和Exception兩種類型。

創(chuàng)建對象可以不使用new關(guān)鍵字； Dart中沒有public，private，protected這些關(guān)鍵字； 沒有interfaces關(guān)鍵字，每一個類都是一個接口。我們可以用抽象類來類比java中的接口； Dart把多重繼承的類叫做Mixins。

支持語法糖 Point(this.x, this.y)； 每個實例變量都會自動生成一個getter方法，Non-final變量還會自動生成一個setter； 命名構(gòu)造函數(shù)，使用命名構(gòu)造函數(shù)可以為一個類實現(xiàn)多個構(gòu)造函數(shù)，也能更加清晰的表明你的意圖；

斷言是如果條件表達式不滿足則停止代碼執(zhí)行； 斷言只在檢查模式下運行有效，如果在生產(chǎn)模式下運行則不會執(zhí)行。

Dart 以兩種模式運行： Dart 1.x 有生產(chǎn)模式和檢查模式兩種模式， Dart 2.x 中移除了檢查模式。

注：建議在開發(fā)/測試模式中使用 檢查模式 運行 Dart VM ，因為它會添加警告和錯誤以幫助開發(fā)和調(diào)試過程；選中的模式會強制執(zhí)行各種檢查，例如類型檢查等。

dart標識符可以包括字符和數(shù)字，但不能以 數(shù)字開頭 。

Dart 是一種面向?qū)ο蟮木幊陶Z言。

代碼說明：定義了一個類 TestClass ，這個類擁有一個方法 disp() ，方法可以實現(xiàn)在終端打印字符串 Hello Dart! ，使用 new 關(guān)鍵字創(chuàng)建類的對象，該對象調(diào)用方法 disp() 。

關(guān)于dart的學(xué)習(xí)還有很多；我列出如下： Flutter高級工程師進階學(xué)習(xí)資料；需要可以私信我。發(fā)送“核心筆記”或“手冊”，即可領(lǐng)取資料！

為什么Flutter開發(fā)APP性能最接近原生，前端程序員請關(guān)注

Flutter是谷歌公司推出的跨終端的開發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開發(fā)語言是Dart，Dart也是谷歌開發(fā)的計算機編程語言，語法類似C，是編譯型語言：

hello world例子，打印字符串“Hello World!”：

1、沒有橋接層

React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：

React Native、Weex等技術(shù)多了一個橋接層，所以界面渲染會慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶體驗跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢所在：

Dart可以被編譯成不同平臺的本地代碼，讓Flutter不通過橋接層直接跟平臺通信，自然性能會快一些。

2、編譯執(zhí)行

JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰好一目了然。

3、Flutter Engine虛擬機

Flutter是依靠Flutter Engine虛擬機在iOS和Android上運行的，F(xiàn)lutter Engine使用C/C++編寫，開發(fā)人員通過Flutter框架直接和API在內(nèi)部進行交互，所以具有輸入低延遲和UI渲染高幀速率的特點。除了這特點之外，F(xiàn)lutter還提供了自己的小部件，F(xiàn)lutter小部件是使用從React獲取靈感的現(xiàn)代框架構(gòu)建的。 中心思想是您使用小部件構(gòu)建UI。

窗口小部件根據(jù)其當(dāng)前配置和狀態(tài)描述了它們的視圖。 當(dāng)窗口小部件的狀態(tài)發(fā)生更改時，窗口小部件會重建其描述，框架將根據(jù)前面的描述進行區(qū)分，以確定底層呈現(xiàn)樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改?？梢灾苯釉贠S平臺提供的畫布上進行描繪，也就是一些核心類庫直接放到虛擬機里面，調(diào)用起來更快。

從它的系統(tǒng)結(jié)構(gòu)可以看出，類似安卓的ART(Android Run Time)虛擬機，同樣采用AOT(Ahead of TIme)技術(shù)，會在APP安裝時就編譯成機器語言，不再解釋執(zhí)行，從而優(yōu)化了APP運行的性能。

4、自帶渲染引擎

Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺上Flutter也會把Skia引擎打包到APP中，從而實現(xiàn)了高效渲染。而React Native通過橋接層訪問原生UI，操作頻繁就容易出性能問題。

綜合所述，F(xiàn)lutter 是性能最接近原生代碼 的一種開發(fā)框架，未來也會是構(gòu)建谷歌Fuchsia應(yīng)用的主要方式，前途不可限量，唯一的問題就是需要學(xué)習(xí)一門新的語言：Dart，而有Java或者C#語言基礎(chǔ)的程序員會比較容易學(xué)習(xí)。

Flutter Widget的渲染原理

抽象類Element 有mount方法

抽象類Widget 有createElement方法

RenderObjectWidget有createElement方法 和??createRenderObject方法

每一個Widget, 都有createElement方法，通過createElement方法 創(chuàng)建一個Element對象，

Element加入Element樹中，它會創(chuàng)建三種Element ，每個Element 有個mount方法

第一種：RenderObjectElement（RenderObjectWidget的createElement方法）

mount方法中 調(diào)用

widget.createRenderObject(this) ，創(chuàng)建RenderObject對象，RenderObject對象加入Render樹中

第二種：StatefulElement繼承ComponentElement?

第三種：StatelessElement繼承ComponentElement?

并不是所有的Widget都會被獨立渲染！只有繼承RenderObjectWidget的才會創(chuàng)建RenderObject對象！?

flutter-動畫

1.動畫原理：在一段時間內(nèi)快速的多次改變UI外觀，由于人眼會產(chǎn)生視覺暫留所以最終看到的就是一個連續(xù)的動畫。

UI的一次改變稱為一個動畫幀，對應(yīng)一次屏幕刷新。

FPS：幀率，每秒的動畫幀數(shù)。

flutter動畫分為兩類：

常見動畫模式：

是一個抽象類，主要的功能是保存動畫的值和狀態(tài)。常用的一個Animation類是Animation double ,是一個在一段時間內(nèi)依次生成一個區(qū)間之間的值的類，可以是線性或者曲線或者其他。

可以生成除double之外的其他類型值，如：Animation Color 或 Animation Size 。

是一個動畫控制器，控制動畫的播放狀態(tài)，在屏幕刷新的每一幀，就會生成一個新的值。

包含動畫的啟動forward()、停止stop() 、反向播放 reverse()等方法，在給定的時間段內(nèi)線性的生成從0.0到1.0（默認區(qū)間）的數(shù)字。

curve:描述動畫的曲線過程。

curvedAnimation:指定動畫的曲線。

常用Curve：

繼承自Animatable T ，表示的就是一個 Animation 對象的取值范圍，只需要設(shè)置開始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。

例如，Tween可能會生成從紅到藍之間的色值，或者從0到255。

Tween.animate:返回一個Animation。

映射過程：

1). Tween.animation通過傳入 aniamtionController 獲得一個_AnimatedEvaluation 類型的 animation 對象(基類為 Animation)， 并且將 aniamtionController 和 Tween 對象傳入了 _AnimatedEvaluation 對象。

2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對象和 AnimationController 對象。

3). 這里的 animation 其實就是前面的 AnimationController 對象， transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。

接收一個TickerProvider類型的對象，它的主要職責(zé)是創(chuàng)建Ticker。

防止屏幕外動畫消耗資源。

[圖片上傳失敗...(image-115b94-1636441483468)]

過程：

回調(diào)：

不使用addListener()和setState()來給widget添加動畫。

使用AnimatedWidget，將widget分離出來，創(chuàng)建一個可重用動畫的widget，AnimatedWidget中會自動調(diào)用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染過渡，把渲染過程也抽象出來：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平臺風(fēng)格一致的路由切換動畫

CupertinoPageRoute：左右切換風(fēng)格

自定義：PageRouteBuilder

1.要創(chuàng)建交織動畫，需要使用多個動畫對象（Animation）。

2.一個AnimationController控制所有的動畫對象。

3.給每一個動畫對象指定時間間隔（Interval）

可以同時對其新、舊子元素添加顯示、隱藏動畫.

當(dāng)AnimatedSwitcher的child發(fā)生變化時（類型或Key不同），舊child會執(zhí)行隱藏動畫，新child會執(zhí)行執(zhí)行顯示動畫。

希望大家支持一下，感謝

Flutter Bloc實現(xiàn)原理

1、繼承SingleChildStatelessWidget，就是一個widget，通過create 傳入一個Bloc對象

1、Bloc繼承自BlocBase，BlocBase中創(chuàng)建了StreamController對象，為多訂閱對象

其中onCounterEvent((event, emit)為初始化創(chuàng)建_eventController監(jiān)聽

2、Bloc中創(chuàng)建_eventController，為事件通知

3、BlocBase創(chuàng)建_stateController,為狀態(tài)刷新通知

4、add方法是執(zhí)行廣播通知

5、處理完數(shù)據(jù)之后執(zhí)行emit()方法，其中emit方法是stateController廣播

1、 BlocBuilder繼承自BlocBuilderBase，_BlocBuilderBaseState中build方法返回的是BlocListener

2、BlocListener繼承BlocListenerBase，_BlocListenerBaseState中_subscribe()添加監(jiān)聽stateController廣播通知

Flutter Provider實現(xiàn)原理

ChangeNotifierProvider、ChangeNotifier、Consumer的關(guān)系

1、ChangeNotifierProvider的父類ListenableProvider，ListenableProvider中實現(xiàn)了_startListening方法，_startListening主要是將Element的刷新方法添加到ChangeNotifier中的_listeners中

2、ListenableProvider將startListening傳入其父類InheritedProvider，InheritedProvider主要是創(chuàng)建delegate = _CreateInheritedProvider。這個delegate就是_CreateInheritedProvider中delegate.startListening中的delegate

1、ChangNotifier負責(zé)更新UI

ChangeNotifier中notifyListeners，通過遍歷_listeners，實現(xiàn)強制刷新UI

1、Consumer:包裹待刷新UI，在buildWithChild中將Provider.ofT(context)傳入builder方法

2、解析 Provider.ofT(context)

Provider.ofT(context)是獲取ChangeNotifier對象的方法

Provider.of中通過傳入的context，獲取父視圖為inheritedElement的對象

獲取到inheritedElement，通過inheritedElement.getValue的方式獲取ChangeNotifier對象

7、繼續(xù)查看inheritedElement?.value。通過斷點可以進入_CreateInheritedProvider 類中g(shù)et Value方法。調(diào)用startListening將當(dāng)前Consumer包裹的element添加到Prorivder的_listeners數(shù)組中

通過調(diào)用notifyListeners()來刷新所有Consumer完整的Provider執(zhí)行流程大概就是這樣，流程圖如下