Flutter 本地圖片導(dǎo)入 2倍圖 3倍圖

1、flutter項目中分別創(chuàng)建assets、images文件夾，在images文件夾下創(chuàng)建 2.0x 和 3.0x文件夾，用來分別存放2倍圖3倍圖。

目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務(wù)器托管、網(wǎng)站改版維護(hù)、企業(yè)網(wǎng)站設(shè)計、方正網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

層級結(jié)構(gòu)如圖下圖:

2、在pubspec.yaml進(jìn)行配置 (注意flutter下 assets:與uses-material-design: 層級結(jié)構(gòu)要左對齊否則會報錯 點擊查看錯誤展示 )

3、cd 進(jìn)入 flutter 項目目錄下，終端執(zhí)行 flutter pub get 命令，使配置生效

4、圖片使用

為什么說移動端的未來是Flutter？

Flutter是Google開發(fā)的新一代跨平臺方案，F(xiàn)lutter可以實現(xiàn)寫一份代碼同時運行在iOS和Android設(shè)備上，并且提供很好的性能體驗。Flutter使用Dart作為開發(fā)語言，這是一門簡潔、強類型的編程語言。Flutter對于iOS和Android設(shè)備，提供了兩套視覺庫，可以針對不同的平臺有不同的展示效果。

Flutter原本是為了解決Web開發(fā)中的一些問題，而開發(fā)的一套精簡版Web框架，擁有獨立的渲染引擎和開發(fā)語言，但后來逐漸演變?yōu)橐苿佣碎_發(fā)框架。正是由于Dart當(dāng)初的定位是為了替代JS成為Web框架，所以Dart的語法更接近于JS語法。例如定義對象構(gòu)建方法，以及實例化對象的方式等。

在Google剛推出Flutter時，其發(fā)展很緩慢，終于在18年發(fā)布第一個Bate版之后迎來了爆發(fā)性增長，發(fā)布第一個Release版時增長速度更快?？梢詮腉ithub上Star數(shù)據(jù)看出來這個增長的過程。在19年最新的Flutter 1.2版本中，已經(jīng)開放Web支持的Beta版。

Flutter不僅僅提供了一套視覺庫，在Flutter整體框架中包含各個層級階段的庫。例如實現(xiàn)一個游戲功能，上面一些游戲控件可以用上層視覺庫，底層游戲可以直接基于Flutter的底層庫進(jìn)行開發(fā)，而不需要調(diào)用原生應(yīng)用的底層庫。Flutter的底層庫是基于Open GL實現(xiàn)的，所以O(shè)pen GL可以做的Flutter都可以。

Flutter面試：渲染原理

頁面中的各界面元素（Widget）以樹的形式組織，即控件樹。Flutter通過控件樹中的每個控件創(chuàng)建不同類型的渲染對象，組成渲染對象樹。而渲染對象樹在Flutter的展示過程分為三個階段：布局、繪制、合成和渲染。

（一）布局

Flutter采用深度優(yōu)先機制遍歷渲染對象樹，決定渲染對象樹中各渲染對象在屏幕上的位置和尺寸。在布局過程中，渲染對象樹中的每個渲染對象都會接收父對象的布局約束參數(shù)，決定自己的大小，然后父對象按照控件邏輯決定各個子對象的位置，完成布局過程。

為了防止因子節(jié)點發(fā)生變化而導(dǎo)致整個控件樹重新布局，F(xiàn)lutter加入了一個機制——布局邊界（Relayout Boundary），可以在某些節(jié)點自動或手動地設(shè)置布局邊界，當(dāng)邊界內(nèi)的任何對象發(fā)生重新布局時，不會影響邊界外的對象，反之亦然。

二）繪制

布局完成后，渲染對象樹中的每個節(jié)點都有了明確的尺寸和位置。Flutter會把所有的渲染對象繪制到不同的圖層上。與布局過程一樣，繪制過程也是深度優(yōu)先遍歷，而且總是先繪制自身，再繪制子節(jié)點。

以下圖為例：節(jié)點1在繪制完自身后，會再繪制節(jié)點2，然后繪制它的子節(jié)點3、4和5，最后繪制節(jié)點6。

可以看到，由于一些其他原因（比如，視圖手動合并）導(dǎo)致2的子節(jié)點5與它的兄弟節(jié)點6處于了同一層，這樣會導(dǎo)致當(dāng)節(jié)點2需要重繪的時候，與其無關(guān)的節(jié)點6也會被重繪，帶來性能損耗。

為了解決這一問題，F(xiàn)lutter提出了與布局邊界對應(yīng)的機制——重繪邊界（Repaint Boundary）。在重繪邊界內(nèi)，F(xiàn)lutter會強制切換新的圖層，這樣就可以避免邊界內(nèi)外的互相影響，避免無關(guān)內(nèi)容置于同一圖層引起不必要的重繪。

重繪邊界的一個典型場景是Scrollview。ScrollView滾動的時候需要刷新視圖內(nèi)容，從而觸發(fā)內(nèi)容重繪。而當(dāng)滾動內(nèi)容重繪時，一般情況下其他內(nèi)容是不需要重繪的，這時候重繪邊界就派上用場了。

（三）合成和渲染

終端設(shè)備的頁面越來越復(fù)雜，因此Flutter的渲染樹層級通常很多，直接交付給渲染引擎進(jìn)行多圖層渲染，可能會出現(xiàn)大量渲染內(nèi)容的重復(fù)繪制，所以還需要先進(jìn)行一次圖層合成，即將所有的圖層根據(jù)大小、層級、透明度等規(guī)則計算出最終的顯示效果，將相同的圖層歸類合并，簡化渲染樹，提高渲染效率。

合并完成后，F(xiàn)lutter會將幾何圖層數(shù)據(jù)交由Skia引擎加工成二維圖像數(shù)據(jù)，最終交由GPU進(jìn)行渲染，完成界面的展示。

四、總結(jié)

咱們從各種業(yè)界主流跨端方案與Flutter的對比開始，到Flutter的簡要介紹以及Flutter的運行機制，并以界面渲染過程為例，從布局、繪制、合成和渲染三個階段講述了Flutter的實現(xiàn)原理。相信大家對Flutter已經(jīng)有一個整體認(rèn)知，趕快一起上手操作起來吧！