相對(duì)于iOS開(kāi)發(fā)，F(xiàn)lutter的布局更具有靈活性，每個(gè)頁(yè)面設(shè)計(jì)都不一樣，相同頁(yè)面可選擇的布局方式也不一樣，如果單純的說(shuō)應(yīng)該如何去布局，我覺(jué)得不現(xiàn)實(shí)，大家可以參考下 Flutter官方的布局教程 。接下來(lái)，筆者，通過(guò)項(xiàng)目中的一個(gè)頁(yè)面，來(lái)一步一步的拆解布局的流程。整個(gè)過(guò)程，基本上按照拆解、組件封裝、具體布局這三步來(lái)的。
10年積累的做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶(hù)對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶(hù)得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有邢臺(tái)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
根據(jù)設(shè)計(jì)圖，可以看出整體可以分成兩部分，上面一部分是系統(tǒng)介紹模塊，下面一部分是真正的登錄內(nèi)容，因?yàn)樯婕暗蒋B加，因此考慮用Stack；
系統(tǒng)介紹模塊部分：整體也是涉及到疊加，考慮用Stack，分為四部分。最底部漸變色背景用一個(gè)contanier，無(wú)須指定位置，全視圖擴(kuò)展；載放logo圖標(biāo)在上一層，用Image。最后兩個(gè)Text同級(jí)放在最上層。Image，Text各用Positioned包裹去指定位置。
登錄內(nèi)容模塊是最外層是一個(gè)Contanier容器，去控制背景色和圓角。然后是一個(gè)Column元素，逐行排列。
第一行為Image，
第二行為T(mén)ext，
第三行可以看成一個(gè)小Column，分兩塊進(jìn)行布局
第四行可以看成一個(gè)小Column，分兩塊進(jìn)行布局
第五行可以看作一個(gè)TextButton，
第六行可以看作一個(gè)Row，分三塊進(jìn)行布局
通過(guò)上面這樣一步一步的分析后，基本上對(duì)大致的布局有了一個(gè)了解，最外層的控件大致選對(duì)（只要能實(shí)現(xiàn)的話(huà)，就是復(fù)雜度以及效率的問(wèn)題），然后一步一步的拆解每一行的元素，如果有重復(fù)的或者覺(jué)得可以封裝出來(lái)的部分，則進(jìn)行下一步。
每一行的拆解，大致也是按照這個(gè)思路來(lái)進(jìn)行，因此筆者在這里就不做講解了。
在做到第三第四行的時(shí)候，發(fā)現(xiàn)這兩個(gè)很相似，而且設(shè)計(jì)到一些交互邏輯，筆者就想對(duì)第三第四行的這種展示進(jìn)行封裝，覺(jué)得今后的布局可能會(huì)用到，因此在這一步，可以先把這一塊兒抽離出一個(gè)控件。利用TextField來(lái)實(shí)現(xiàn)這種輸入操作，具體的實(shí)現(xiàn)筆者不再詳細(xì)的描述了。
經(jīng)過(guò)這一步，整體的規(guī)劃設(shè)計(jì)圖已經(jīng)有了，各個(gè)組件也都有了，接下來(lái)的工作就是組裝了。
具體布局設(shè)計(jì)到一些細(xì)節(jié)的地方，例如整體Column的居中對(duì)齊（crossAxisAlignment）、間隔（Padding或Container包裹，筆者更喜歡用SizedBox占位）、居左居右居中（Align）、點(diǎn)擊事件（GestureDetector）以及圓角（BorderRadius）等一些特殊情況。
像第六行row是放在底部的，就可以在第六行前面增加一個(gè)Spacer()去填充空白區(qū)域。
對(duì)文字顏色大小等，可以用TextStyle直接設(shè)置。
對(duì)于輸入框的刪除按鈕，可以用Offstage這種Flutter特有的控制顯示隱藏的控件。
對(duì)于初學(xué)flutter的朋友來(lái)說(shuō)，要知道，flutter的UI萬(wàn)物皆Widget。
flutter所寫(xiě)的頁(yè)面的結(jié)構(gòu)可以被看成套娃，一層套一層，一層套一層，一層套一層。。。。。。
Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從 React 中獲得的靈感，中心思想是用widget構(gòu)建你的UI。 Widget描述了他們的視圖在給定其當(dāng)前配置和狀態(tài)時(shí)應(yīng)該看起來(lái)像什么。當(dāng)widget的狀態(tài)發(fā)生變化時(shí)，widget會(huì)重新構(gòu)建UI，F(xiàn)lutter會(huì)對(duì)比前后變化的不同， 以確定底層渲染樹(shù)從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改。
Text ： 該 widget 可讓創(chuàng)建一個(gè)帶格式的文本。
Row 、 Column ： 這些具有彈性空間的布局類(lèi)Widget可讓您在水平（ Row ）和垂直（ Column ）方向上創(chuàng)建靈活的布局。
Stack ：取代線(xiàn)性布局 (和Android中的LinearLayout相似)，Stack允許子 widget 堆疊， 你可以使用 Positioned 來(lái)定位他們相對(duì)于 Stack 的上下左右四條邊的位置。
Container ： Container 可讓您創(chuàng)建矩形視覺(jué)元素。 您可以為 Container 裝飾一個(gè) BoxDecoration , 如 background、一個(gè)邊框、或者一個(gè)陰影。 Container 也可以具有邊距（margins）、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外， Container 可以使用矩陣在三維空間中對(duì)其進(jìn)行變換。
具體的演示見(jiàn)我另外的博客
有一部分Widget都有一個(gè) child 屬性，用于容納唯一的子Widget。
例如：Container、Center、Padding、Align等Widget。
還有一部分Widget允許存在多個(gè)子Widget，用 children 作為屬性。
例如：Row、Column、Stack等Widget。
在StatefulWidget調(diào)用createState之后，框架將新的狀態(tài)插入樹(shù)種，然后調(diào)用狀態(tài)對(duì)象的initState。子類(lèi)化State可以重寫(xiě)initState，以完成僅需要一次執(zhí)行的工作。當(dāng)然在initState的實(shí)現(xiàn)中需要調(diào)用super.initState
當(dāng)一個(gè)狀態(tài)對(duì)象不再需要時(shí)，框架調(diào)用狀態(tài)對(duì)象的dispose。也可以通過(guò)覆蓋dispose方法來(lái)執(zhí)行清理工作。
OVER~
Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶(hù)界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開(kāi)源的。(-中文網(wǎng)；-英文網(wǎng))
Flutter是一種趨勢(shì)，勢(shì)必會(huì)取代RN，成為最主流的跨平臺(tái)開(kāi)發(fā)框架，基于Dart語(yǔ)言。ios開(kāi)發(fā)必須Mac電腦。android開(kāi)發(fā)window、linux、Mac均可。
Flutter是谷歌公司推出的跨終端的開(kāi)發(fā)框架，支持Android、iOS和WEB終端。1.0版在2018年12月5日發(fā)布，目前的最新版本是1.5，它采用的開(kāi)發(fā)語(yǔ)言是Dart，Dart也是谷歌開(kāi)發(fā)的計(jì)算機(jī)編程語(yǔ)言，語(yǔ)法類(lèi)似C，是編譯型語(yǔ)言：
hello world例子，打印字符串“Hello World!”：
1、沒(méi)有橋接層
React Native、Weex等技術(shù)都是跨終端的框架，然而性能跟原生App存在很大差距。這是由于它們的工作原理決定的：
React Native、Weex等技術(shù)多了一個(gè)橋接層，所以界面渲染會(huì)慢一些，由于UI渲染非常頻繁，想要不卡頓，基本上比較難，性能和用戶(hù)體驗(yàn)跟原生代碼有差距。而這恰恰是Flutter的優(yōu)勢(shì)所在：
Dart可以被編譯成不同平臺(tái)的本地代碼，讓Flutter不通過(guò)橋接層直接跟平臺(tái)通信，自然性能會(huì)快一些。
2、編譯執(zhí)行
JavaScript是解釋執(zhí)行的，Dart是編譯執(zhí)行的，性能誰(shuí)好一目了然。
3、Flutter Engine虛擬機(jī)
Flutter是依靠Flutter Engine虛擬機(jī)在iOS和Android上運(yùn)行的，F(xiàn)lutter Engine使用C/C++編寫(xiě)，開(kāi)發(fā)人員通過(guò)Flutter框架直接和API在內(nèi)部進(jìn)行交互，所以具有輸入低延遲和UI渲染高幀速率的特點(diǎn)。除了這特點(diǎn)之外，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ā)生更改時(shí)，窗口小部件會(huì)重建其描述，框架將根據(jù)前面的描述進(jìn)行區(qū)分，以確定底層呈現(xiàn)樹(shù)從一個(gè)狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需的最小更改。可以直接在OS平臺(tái)提供的畫(huà)布上進(jìn)行描繪，也就是一些核心類(lèi)庫(kù)直接放到虛擬機(jī)里面，調(diào)用起來(lái)更快。
從它的系統(tǒng)結(jié)構(gòu)可以看出，類(lèi)似安卓的ART(Android Run Time)虛擬機(jī)，同樣采用AOT(Ahead of TIme)技術(shù)，會(huì)在A(yíng)PP安裝時(shí)就編譯成機(jī)器語(yǔ)言，不再解釋執(zhí)行，從而優(yōu)化了APP運(yùn)行的性能。
4、自帶渲染引擎
Flutter使用谷歌自己的Skia渲染引擎，而Android系統(tǒng)自帶Skia引擎，iOS平臺(tái)上Flutter也會(huì)把Skia引擎打包到APP中，從而實(shí)現(xiàn)了高效渲染。而React Native通過(guò)橋接層訪(fǎng)問(wèn)原生UI，操作頻繁就容易出性能問(wèn)題。
綜合所述，F(xiàn)lutter 是性能最接近原生代碼 的一種開(kāi)發(fā)框架，未來(lái)也會(huì)是構(gòu)建谷歌Fuchsia應(yīng)用的主要方式，前途不可限量，唯一的問(wèn)題就是需要學(xué)習(xí)一門(mén)新的語(yǔ)言：Dart，而有Java或者C#語(yǔ)言基礎(chǔ)的程序員會(huì)比較容易學(xué)習(xí)。
實(shí)現(xiàn)pdf閱讀、橫豎屏切換，以及pdf頁(yè)面的點(diǎn)擊放大和雙指放大等功能
在這個(gè)項(xiàng)目中使用的是 flutter_plugin_pdf_viewer: ^1.0.7 ，可以滿(mǎn)足我們最基本的pdf需求閱讀需求。所做的滿(mǎn)足項(xiàng)目需求的工作主要是橫豎屏切換功能，以及我們的初始化繼續(xù)閱讀等等。
首先導(dǎo)入插件部分源碼
插件所提供的示例，已經(jīng)滿(mǎn)足了最基本的圖片放大、橫屏閱讀的功能，我們工作的難點(diǎn)就在于pdf豎屏閱讀的實(shí)現(xiàn)，所以我們需要解決的問(wèn)題主要有以下幾點(diǎn)：
（1） 橫屏加載同一頁(yè)面不能重復(fù)流量加載
（2） 切換豎屏?xí)r加載速度不能過(guò)慢，頁(yè)面不能有斷層
（3） 橫豎屏切換時(shí)頁(yè)碼的定位保持
針對(duì)于上述問(wèn)題，我們一一進(jìn)行解決。
重復(fù)流量加載 ，解決這一問(wèn)題比較簡(jiǎn)單，我們可以利用緩存實(shí)現(xiàn)，在每一次加載pdf頁(yè)時(shí)，存儲(chǔ)其(key,value)，這樣在下一次加載時(shí)我們會(huì)判斷這個(gè)頁(yè)面在緩存中是否已經(jīng)存在，不存在重新加載，存在則調(diào)用緩存中的數(shù)據(jù)，頁(yè)面銷(xiāo)毀時(shí)清除所有緩存即可。
切換橫豎屏 ，豎屏PDF閱讀的實(shí)現(xiàn)，思路就是將所有橫屏頁(yè)面存在list中，使用LIstView.builder()進(jìn)行繪制，這種方法存在的缺點(diǎn)就是太慢了，需要將所有頁(yè)面全部加載之后，才可以繪制頁(yè)面，用戶(hù)體驗(yàn)非常差，所以我們需要做一些改進(jìn)，為了提升加載速度，實(shí)現(xiàn)效果GIF中的效果，我們就要使用FutureBuilder()方法，來(lái)實(shí)現(xiàn)預(yù)加載功能，具體實(shí)現(xiàn)如下：
（在這里不對(duì)此組件過(guò)多介紹，后續(xù)會(huì)專(zhuān)門(mén)介紹此組件的使用），這樣我們就可以實(shí)現(xiàn)預(yù)加載的功能了。
橫豎屏切換定位 ，這個(gè)點(diǎn)的解決思路已經(jīng)在我的 （Flutter 初始化ListView定位子組件位置） 中進(jìn)行了介紹，實(shí)現(xiàn)了解決。
至此，我們就解決了所有的難點(diǎn)問(wèn)題。
1.動(dòng)畫(huà)原理：在一段時(shí)間內(nèi)快速的多次改變UI外觀(guān)，由于人眼會(huì)產(chǎn)生視覺(jué)暫留所以最終看到的就是一個(gè)連續(xù)的動(dòng)畫(huà)。
UI的一次改變稱(chēng)為一個(gè)動(dòng)畫(huà)幀，對(duì)應(yīng)一次屏幕刷新。
FPS：幀率，每秒的動(dòng)畫(huà)幀數(shù)。
flutter動(dòng)畫(huà)分為兩類(lèi)：
常見(jiàn)動(dòng)畫(huà)模式：
是一個(gè)抽象類(lèi)，主要的功能是保存動(dòng)畫(huà)的值和狀態(tài)。常用的一個(gè)Animation類(lèi)是Animation double ,是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間之間的值的類(lèi)，可以是線(xiàn)性或者曲線(xiàn)或者其他。
可以生成除double之外的其他類(lèi)型值，如：Animation Color 或 Animation Size 。
是一個(gè)動(dòng)畫(huà)控制器，控制動(dòng)畫(huà)的播放狀態(tài)，在屏幕刷新的每一幀，就會(huì)生成一個(gè)新的值。
包含動(dòng)畫(huà)的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法，在給定的時(shí)間段內(nèi)線(xiàn)性的生成從0.0到1.0（默認(rèn)區(qū)間）的數(shù)字。
curve:描述動(dòng)畫(huà)的曲線(xiàn)過(guò)程。
curvedAnimation:指定動(dòng)畫(huà)的曲線(xiàn)。
常用Curve：
繼承自Animatable T ，表示的就是一個(gè) Animation 對(duì)象的取值范圍，只需要設(shè)置開(kāi)始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。
例如，Tween可能會(huì)生成從紅到藍(lán)之間的色值，或者從0到255。
Tween.animate:返回一個(gè)Animation。
映射過(guò)程：
1). Tween.animation通過(guò)傳入 aniamtionController 獲得一個(gè)_AnimatedEvaluation 類(lèi)型的 animation 對(duì)象(基類(lèi)為 Animation)， 并且將 aniamtionController 和 Tween 對(duì)象傳入了 _AnimatedEvaluation 對(duì)象。
2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對(duì)象和 AnimationController 對(duì)象。
3). 這里的 animation 其實(shí)就是前面的 AnimationController 對(duì)象， transform 方法里面的 animation.value則就是 AnimationController 線(xiàn)性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個(gè) 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。
接收一個(gè)TickerProvider類(lèi)型的對(duì)象，它的主要職責(zé)是創(chuàng)建Ticker。
防止屏幕外動(dòng)畫(huà)消耗資源。
[圖片上傳失敗...(image-115b94-1636441483468)]
過(guò)程：
回調(diào)：
不使用addListener()和setState()來(lái)給widget添加動(dòng)畫(huà)。
使用AnimatedWidget，將widget分離出來(lái)，創(chuàng)建一個(gè)可重用動(dòng)畫(huà)的widget，AnimatedWidget中會(huì)自動(dòng)調(diào)用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染過(guò)渡，把渲染過(guò)程也抽象出來(lái)：
AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。
MaterialPageRoute：平臺(tái)風(fēng)格一致的路由切換動(dòng)畫(huà)
CupertinoPageRoute：左右切換風(fēng)格
自定義：PageRouteBuilder
1.要?jiǎng)?chuàng)建交織動(dòng)畫(huà)，需要使用多個(gè)動(dòng)畫(huà)對(duì)象（Animation）。
2.一個(gè)AnimationController控制所有的動(dòng)畫(huà)對(duì)象。
3.給每一個(gè)動(dòng)畫(huà)對(duì)象指定時(shí)間間隔（Interval）
可以同時(shí)對(duì)其新、舊子元素添加顯示、隱藏動(dòng)畫(huà).
當(dāng)AnimatedSwitcher的child發(fā)生變化時(shí)（類(lèi)型或Key不同），舊child會(huì)執(zhí)行隱藏動(dòng)畫(huà)，新child會(huì)執(zhí)行執(zhí)行顯示動(dòng)畫(huà)。
希望大家支持一下，感謝
重慶分公司
重慶分公司
