基于Flutter的圖片風(fēng)格轉(zhuǎn)換App設(shè)計(jì)與實(shí)現(xiàn)

翁子欣 吳明暉

摘? 要： Flutter是Google開(kāi)發(fā)的一種高性能的跨平臺(tái)移動(dòng)UI框架，是一套聚焦于原生體驗(yàn)的分層架構(gòu)。文章介紹了Flutter的框架特性和實(shí)現(xiàn)原理，描述了基于Flutter的圖片風(fēng)格轉(zhuǎn)換App的設(shè)計(jì)過(guò)程，對(duì)App的 UI設(shè)計(jì)、不同狀態(tài)類型的關(guān)鍵Widget設(shè)計(jì)等關(guān)鍵開(kāi)發(fā)步驟進(jìn)行了詳細(xì)說(shuō)明。開(kāi)發(fā)實(shí)踐表明，基于Flutter框架進(jìn)行App開(kāi)發(fā)能夠在不降低用戶體驗(yàn)的基礎(chǔ)上提高開(kāi)發(fā)效率。

關(guān)鍵詞： Flutter; UI框架; Widget; 圖片風(fēng)格轉(zhuǎn)換; 移動(dòng)應(yīng)用

中圖分類號(hào)：TP399? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A? ? 文章編號(hào)：1006-8228（2020）02-67-04

Design and implementation of image style transfer App based on Flutter

Weng Zixin， Wu Minghui

（School of Computer and Computing Science， Zhejiang University City College， Hangzhou， Zhejiang 310015， China）

Abstract： Flutter is a high performance cross platform mobile UI framework developed by Google， which is a layered architecture focusing on the original experience. This paper introduces the main framework features and implementation principles of Flutter， describes the design process of the image style transfer App based on Flutter， and describes the key development steps such as the UI design of the App and the design of key Widgets with different state types in detail. The development practice shows that the application development based on the Flutter framework can improve the development efficiency without reducing the user experience.

Key words： Flutter; UI framework; Widget; image style transfer; mobile App

0 概述

當(dāng)前主流的移動(dòng)應(yīng)用操作系統(tǒng)包括Android和iOS。其中，AndroidApp的主流開(kāi)發(fā)平臺(tái)為Android Studio和Eclipse，主要開(kāi)發(fā)語(yǔ)言是Java。iOSApp則利用MacOS端的XCode進(jìn)行開(kāi)發(fā)，開(kāi)發(fā)語(yǔ)言為Object-C或Swift。若要開(kāi)發(fā)一款適用于這兩大系統(tǒng)的App，開(kāi)發(fā)者需要掌握兩套不同的技術(shù)。這會(huì)大大增加研發(fā)成本和維護(hù)成本。因此，利用跨平臺(tái)框架來(lái)開(kāi)發(fā)移動(dòng)應(yīng)用的意義十分重大[1]。

Flutter是Google在2018年2月27日世界移動(dòng)大會(huì)上發(fā)布的一個(gè)跨平臺(tái)開(kāi)發(fā)框架。它支持在Android和iOS上快速構(gòu)建高質(zhì)量的原生用戶界面，支持以毫秒級(jí)的熱重載更新應(yīng)用頁(yè)面，聚焦于原生體驗(yàn)的分層架構(gòu)，允許用戶完全自定義設(shè)計(jì)。兼具眾多優(yōu)點(diǎn)，F(xiàn)lutter這一新興的跨平臺(tái)開(kāi)發(fā)框架迅速進(jìn)入開(kāi)發(fā)者的視野，受到業(yè)界的熱烈關(guān)注[2]。

Flutter的特別之處在于，它既不使用WebView也不使用系統(tǒng)原生控件，而是選擇高性能的渲染引擎來(lái)畫(huà)控件。此外，F(xiàn)lutter只有C/C++代碼編寫的單一層，開(kāi)發(fā)者能更容易控制系統(tǒng)，更方便地讀取或者修改系統(tǒng)的組件、手勢(shì)、動(dòng)畫(huà)框架和控件等等[3]。

Flutter頁(yè)面中所有的元素均為Widget。Flutter使用自己高性能引擎Skia來(lái)繪制Widget。這樣不僅可以保證在Android和iOS上UI的一致性，還可以避免對(duì)原生控件依賴而帶來(lái)的限制及高昂的維護(hù)成本。Skia是Google的一個(gè)2D圖形處理函數(shù)庫(kù)，包含字型、坐標(biāo)轉(zhuǎn)換以及點(diǎn)陣圖，有高效能且簡(jiǎn)潔的表現(xiàn)，并且提供了非常友好的API[4]。

Flutter 采用 Dart編程語(yǔ)言來(lái)編譯。Dart語(yǔ)言用預(yù)編譯的方式編譯多個(gè)平臺(tái)的原生代碼。這使得Flutter能直接與平臺(tái)通信而不需要執(zhí)行上下文切換的JavaScript橋接器。Dart語(yǔ)言適合Flutter框架的主要原因在于它支持Flutter的兩個(gè)關(guān)鍵特性：在開(kāi)發(fā)階段采用JIT模式，改動(dòng)無(wú)需編譯，極大的節(jié)省了開(kāi)發(fā)時(shí)間;在發(fā)布時(shí)可以通過(guò)AOT生成高效的ARM代碼以保證應(yīng)用性能。并且Dart在連續(xù)分配多個(gè)對(duì)象的時(shí)候，所需消耗的資源非常少。Dart虛擬機(jī)可以快速分配內(nèi)存給短期生存的對(duì)象，使很復(fù)雜的UI能在60ms內(nèi)完成一幀的渲染，從而保證了平滑的展示UI滑動(dòng)及動(dòng)畫(huà)等效果。

1 Flutter框架特性

1.1 Widget

Flutter頁(yè)面中所有元素都是Widget。Flutter的Widget是對(duì)頁(yè)面UI的一種描述，類似于Web中的HTML。應(yīng)用程序、頁(yè)面、布局、視圖、事件、通知、甚至是具體的文本樣式都統(tǒng)一化為Widget可以讓Flutter的代碼更加統(tǒng)一。Flutter在構(gòu)建UI過(guò)程中形成了一個(gè)類似于iOS視圖樹(shù)的Widget樹(shù)，如圖1所示。Flutter的控件通常由許多小型、單用途的控件組成而不是擴(kuò)展現(xiàn)有的控件類。小控件結(jié)合起來(lái)產(chǎn)生強(qiáng)大的效果。類的層次結(jié)構(gòu)是扁平的，使可能的組合數(shù)量最大化。

視圖在運(yùn)行時(shí)可能變化，因此Flutter引入了State來(lái)管理視圖狀態(tài)。在修改完數(shù)據(jù)后，需要主動(dòng)調(diào)用setState（）來(lái)觸發(fā)視圖狀態(tài)的更新。根據(jù)狀態(tài)是否可變，Widget又被分為StatefulWidget和StatelessWidget，兩者都繼承自Widget。其中StatelessWidget是指無(wú)可變狀態(tài)的Widget，這類Widget的狀態(tài)只由創(chuàng)建Widget時(shí)傳入的參數(shù)決定，一旦創(chuàng)建，其在頁(yè)面上展示的效果就不再改變。而StatefulWidget存在可變狀態(tài)。當(dāng)通過(guò)setState（）改變狀態(tài)時(shí)，F(xiàn)lutter就會(huì)重新渲染該Widget。

1.2 布局

主要使用了Row、Column、Container、Expanded、Stack等。Row、Column提供了水平、垂直方向的布局，Stack提供了堆疊方式的布局，各種容器有不同的特性，可根據(jù)實(shí)際頁(yè)面需求選擇搭配不同的布局。

1.3 插件

Flutter有很多功能強(qiáng)大的插件[5]，比如：狀態(tài)管理插件、推送、QQ、事件總線Event Bus、Toast提示、圖片選擇器、圖片加載等。在基于Flutter的圖片風(fēng)格轉(zhuǎn)換App的設(shè)計(jì)與實(shí)現(xiàn)中運(yùn)用到了狀態(tài)管理插件、QQ、圖片選擇器、圖片加載器、圖片緩存等。

2 基于Flutter的UI構(gòu)建

UI構(gòu)造過(guò)程經(jīng)歷了從Widget樹(shù)轉(zhuǎn)換成Element樹(shù)再到最終渲染的RenderObject樹(shù)。如圖2所示。

其中，Widget樹(shù)主要存放渲染內(nèi)容、視圖布局信息;Element存放上下文，通過(guò)Element遍歷視圖樹(shù)，Element同時(shí)持有Widget和RenderObject;Element是對(duì)應(yīng)Widget在渲染樹(shù)的實(shí)例化節(jié)點(diǎn)。同一個(gè)Widget可以對(duì)應(yīng)渲染樹(shù)中的多個(gè)Element，類似于一個(gè)視圖模板;RenderObject根據(jù)Widget的布局屬性進(jìn)行l(wèi)ayout，paint Widget傳人的內(nèi)容。另外，在視圖描述Widget和真實(shí)渲染的RenderObject的中間設(shè)計(jì)的Element層對(duì)某一時(shí)刻的事件做了匯總和比對(duì)，只對(duì)真正需要修改的部分同步到真實(shí)渲染的RenderObject樹(shù)上面，提高了渲染效率。

3 圖像風(fēng)格轉(zhuǎn)換App設(shè)計(jì)

這款A(yù)pp的主要功能是將用戶選擇的圖片按照指定風(fēng)格轉(zhuǎn)換并展示。用戶可以將轉(zhuǎn)換好的圖片保存至本地相冊(cè)或分享至QQ。App的UI界面設(shè)計(jì)如圖3。

用戶首先從本地相冊(cè)或者使用相機(jī)拍攝獲取需要轉(zhuǎn)換風(fēng)格的圖片。用戶選定圖片后的界面如圖3（a）。點(diǎn)擊不同風(fēng)格對(duì)應(yīng)窗口中的轉(zhuǎn)換按鈕，等待數(shù)秒后即得到對(duì)應(yīng)風(fēng)格的目標(biāo)圖片，效果如圖3（b）所示。用戶可以向上滑動(dòng)界面觸發(fā)分享功能，將轉(zhuǎn)換好的圖片分享給QQ好友，如圖3（c），也可以下滑界面觸發(fā)保存功能，將轉(zhuǎn)換好的圖片保存至本地相冊(cè)，效果如圖3（d）。

根據(jù)需要實(shí)現(xiàn)的功能，該App的主要組件為：圖片選擇器、圖片翻頁(yè)器、圖片風(fēng)格轉(zhuǎn)換器、相機(jī)按鈕、相冊(cè)按鈕以及風(fēng)格轉(zhuǎn)換按鈕。

圖片選擇器用于管理圖片選擇，將圖片從相機(jī)/相冊(cè)中導(dǎo)入后轉(zhuǎn)換成MemoryImage類型的圖片保存在內(nèi)存中，如圖4所示。在導(dǎo)入圖片的過(guò)程中，可以適當(dāng)壓縮圖片大小以減少內(nèi)存的占用，并且根據(jù)圖片的EXIF信息把圖片旋轉(zhuǎn)到正常的角度，計(jì)算圖片的主要色調(diào)，用以確定圖片邊框顏色和按鈕控件的顏色等。圖片翻頁(yè)器用于管理各個(gè)風(fēng)格的圖片。圖片風(fēng)格轉(zhuǎn)換器是狀態(tài)可變的Widget，用于管理圖片轉(zhuǎn)換的狀態(tài)。其通過(guò)圖片的轉(zhuǎn)換階段來(lái)確定Widget的渲染外觀并確定是否要顯示轉(zhuǎn)換按鈕以及調(diào)用網(wǎng)絡(luò)請(qǐng)求。

4 重要Widget的實(shí)現(xiàn)

Widget的主要任務(wù)是實(shí)現(xiàn)build函數(shù)，定義Widget中其他較低層次的控件，build函數(shù)依次構(gòu)建這些控件即實(shí)例化一個(gè)或者多個(gè)Element對(duì)象。通過(guò)Element對(duì)象實(shí)現(xiàn)UI渲染樹(shù)，直到底層渲染對(duì)象。

Flutter可以在Windows、Linux、Mac上開(kāi)發(fā)，開(kāi)發(fā)工具可以使用VS Code、Android Studio、IDEA等，本次開(kāi)發(fā)使用Android Studio，主要因?yàn)锳ndroid Studio提供的Flutter Inspector工具可以實(shí)時(shí)審查元素，解決界面的顯示適配問(wèn)題。下面舉例介紹幾個(gè)典型的狀態(tài)可變的Widget與狀態(tài)不可變的Widget的實(shí)現(xiàn)：

4.1 圖片選擇器（Stateful）

圖片選擇器的構(gòu)造函數(shù)：

@override

Widget build（BuildContext context）{

print（lastColor）;

returnFutureBuilder（

future： MyTools.loadImage（_imgPath），

builder：（BuildContextcontext， AsyncSnapshotsnapshot）{

Widget ret;

if（snapshot.hasError）{

ret = Text（snapshot.error.toString（））;

}else{

MyImageData data = snapshot.data;

Switch（snapshot.connectionState）{

CaseConnectionState.done：

lastMainColor = data.color.color;

lastTextColor = data.color.color;

lastColor = data.color;

ret=MyPageController（data，styleNames，styleJson）;

ret = Text（“l(fā)oading”）;

}

}

return new Container（

color： lastMainColor，

child： addButtons（ret，lastColor），

）; // Container

}，

）; //FutureBuilder

}

上述構(gòu)造函數(shù)用于圖片選擇。當(dāng)導(dǎo)入不同圖片時(shí)，該Widget需要被刷新，因此該Widget是有狀態(tài)變化的組件，需要繼承自Statefulwidget類。因?yàn)榧虞d和計(jì)算圖片的屬性比較耗時(shí)，所以使用FutureBuilder對(duì)象來(lái)觀察這個(gè)耗時(shí)操作并根據(jù)該操作的不同階段來(lái)返回不同的Widget樹(shù)。當(dāng)setState（）被調(diào)用時(shí)，build方法都會(huì)重新執(zhí)行以改變?cè)揥idget的狀態(tài)。

4.2 圖片風(fēng)格轉(zhuǎn)換器（Stateful）

首先用Stack控件構(gòu)造圖片和圖片的高斯模糊化的邊框，然后根據(jù)該控件的狀態(tài)決定是否需要加上轉(zhuǎn)換按鈕。最外層的手勢(shì)監(jiān)控控件（GestureDetector）用于監(jiān)視用戶的手勢(shì)，當(dāng)用戶上下滑動(dòng)界面時(shí)，要讓控件產(chǎn)生上下位移的效果。上移觸發(fā)分享的功能，下移觸發(fā)保存的功能。在手勢(shì)監(jiān)控控件（GestureDetector）中編寫對(duì)應(yīng)用戶下拉手勢(shì)的動(dòng)畫(huà)效果：用AnimationController和Tween線性的觸發(fā)重繪函數(shù)（setState（）），使得控件對(duì)應(yīng)用戶下拉手勢(shì)，并且在松手之后會(huì)有回彈效果。同時(shí)，還可以調(diào)用onVerticalDragEnd事件。在用戶完成下拉操作時(shí)添加額外動(dòng)畫(huà)。

4.3 圖片翻頁(yè)器（Stateless）

使用系統(tǒng)的PageController控件構(gòu)造一個(gè)可以左右翻頁(yè)用于展示多種轉(zhuǎn)換效果的控件。該控件通過(guò)傳入itemBuilder參數(shù)告訴控件如何渲染每頁(yè)的內(nèi)容。頭部的Text說(shuō)明風(fēng)格的種類，中間的圖片風(fēng)格轉(zhuǎn)換器控件用于展示圖片。效果如圖5所示。

5 結(jié)束語(yǔ)

Flutter基于Skia引擎使用Dart語(yǔ)言搭建了一套全新的UI框架，底層調(diào)用OpenGL繪制，在Native和Flutter Engine上實(shí)現(xiàn)了UI的隔離。開(kāi)發(fā)者在寫UI代碼時(shí)就不用再關(guān)心平臺(tái)實(shí)現(xiàn)，從而實(shí)現(xiàn)了跨平臺(tái)。此外，F(xiàn)lutter可以通過(guò)平臺(tái)通道與原生進(jìn)行靈活通信，渲染效率非常高，其release版的流暢度堪比原生。在排版、圖標(biāo)、滾動(dòng)、點(diǎn)擊等方面，F(xiàn)lutter能夠?qū)崿F(xiàn)零差異。Flutter作為一個(gè)高效開(kāi)發(fā)與高性能并存的UI框架，大大提高了移動(dòng)應(yīng)用的開(kāi)發(fā)效率。隨著Google與開(kāi)源社區(qū)的不斷支持，將會(huì)有更多的開(kāi)發(fā)者感受到利用Flutter框架進(jìn)行開(kāi)發(fā)帶來(lái)的高效體驗(yàn)。相信Flutter在跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)中將成為一種新趨勢(shì)，受到業(yè)界更加熱烈的關(guān)注。

參考文獻(xiàn)（References）：

[1] 金誠(chéng).移動(dòng)應(yīng)用跨平臺(tái)開(kāi)發(fā)框架的比較分析[J].民營(yíng)科技， 2018.10：150-152

[2] 彭娟. 跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)研究[J].科學(xué)咨詢（科技·管理），2017.27：59.

[3] 周勇，程子清.Flutter的原理深度剖析[J].電腦編程技巧與維護(hù)，2018.11：19-21

[4] 杜文. Flutter實(shí)戰(zhàn)[EB/OL].https：//book.flutterchina.club/，2019-4-26.

[5] KeMao，MarkHarman，YueJia. Robotic Testing of Mobile Apps for Truly Black-Box Automation[J].IEEE Software，2017.34（2）：11-16