2024年5月4日发(作者：)

计算机时代2020年第2期

·67·

DOI:10.16644/33-1094/tp.2020.02.018

基于Flutter的图片风格转换App设计与实现*

翁子欣，吴明晖

(浙江大学城市学院计算机与计算科学学院，浙江杭州310015)

摘要：

Flutter是Google开发的一种高性能的跨平台移动UI框架，是一套聚焦于原生体验的分层架构。文章介绍了

Flutter的框架特性和实现原理，描述了基于Flutter的图片风格转换App的设计过程，对App的UI设计、不同状态类型的

关键Widget设计等关键开发步骤进行了详细说明。开发实践表明，基于Flutter框架进行App开发能够在不降低用户体

验的基础上提高开发效率。

关键词：

Flutter；UI框架；Widget；图片风格转换；移动应用

中图分类号：TP399文献标识码：A文章编号：1006-8228(2020)02-67-04

DesignandimplementationofimagestyletransferAppbasedonFlutter

WengZixin，WuMinghui

(SchoolofComputerandComputingScience,ZhejiangUniversityCityCollege,Hangzhou,Zhejiang310015,China)

Abstract：FlutterisahighperformancecrossplatformmobileUIframeworkdevelopedbyGoogle,whichisalayeredarchitecture

perintroducesthemainframeworkfeaturesandimplementationprinciplesofFlutter,

describesthedesignprocessoftheimagestyletransferAppbasedonFlutter,anddescribesthekeydevelopmentstepssuchasthe

UIdesignelopmentpracticeshowsthatthe

applicationdevelopmentbasedontheFlutterframeworkcanimprovethedevelopmentefficiencywithoutreducingtheuser

experience.

Keywords：Flutter；UIframework；Widget；imagestyletransfer；mobileApp

0概述

当前主流的移动应用操作系统包括Android和

iOS。其中,AndroidApp的主流开发平台为Android

Studio和Eclipse，主要开发语言是Java。iOSApp则利

用MacOS端的XCode进行开发，开发语言为Object-C

或Swift。若要开发一款适用于这两大系统的App，开

发者需要掌握两套不同的技术。这会大大增加研发

成本和维护成本。因此，利用跨平台框架来开发移动

应用的意义十分重大。

[1]

秒级的热重载更新应用页面，聚焦于原生体验的分层

架构，允许用户完全自定义设计。兼具众多优点，

Flutter这一新兴的跨平台开发框架迅速进入开发者的

视野，受到业界的热烈关注

[2]

。

Flutter的特别之处在于，它既不使用WebView也

不使用系统原生控件，而是选择高性能的渲染引擎来

画控件。此外，Flutter只有C/C++代码编写的单一层，

开发者能更容易控制系统，更方便地读取或者修改系

统的组件、手势、动画框架和控件等等

[3]

。

Flutter页面中所有的元素均为Widget。Flutter使

用自己高性能引擎Skia来绘制Widget。这样不仅可

以保证在Android和iOS上UI的一致性，还可以避免

Flutter是Google在2018年2月27日世界移动大

会上发布的一个跨平台开发框架。它支持在Android

和iOS上快速构建高质量的原生用户界面，支持以毫

收稿日期：2019-09-29

*基金项目：国家大学生创新创业训练计划项目(2)

作者简介：翁子欣（1998-），女，浙江丽水人，学生，计算机专业，主要研究方向：移动应用、人工智能。

通讯作者：吴明晖（1976-），男，江西南昌人，博士，教授，主要研究方向：移动计算、人工智能。

·68·

ComputerEraNo.22020

对原生控件依赖而带来的限制及高昂的维护成本。

Skia是Google的一个2D图形处理函数库，包含字型、

坐标转换以及点阵图，有高效能且简洁的表现，并且

提供了非常友好的API

[4]

。

Flutter采用Dart编程语言来编译。Dart语言用

预编译的方式编译多个平台的原生代码。这使得

Flutter能直接与平台通信而不需要执行上下文切换的

JavaScript桥接器。Dart语言适合Flutter框架的主要

原因在于它支持Flutter的两个关键特性：在开发阶段

采用JIT模式，改动无需编译，极大的节省了开发时

间；在发布时可以通过AOT生成高效的ARM代码以

保证应用性能。并且Dart在连续分配多个对象的时

候，所需消耗的资源非常少。Dart虚拟机可以快速分

配内存给短期生存的对象，使很复杂的UI能在60ms

内完成一帧的渲染，从而保证了平滑的展示UI滑动及

动画等效果。

1Flutter框架特性

1.1Widget

Flutter页面中所有元素都是Widget。Flutter的

Widget是对页面UI的一种描述，类似于Web中的

HTML。应用程序、页面、布局、视图、事件、通知、甚至

是具体的文本样式都统一化为Widget可以让Flutter

的代码更加统一。Flutter在构建UI过程中形成了一

个类似于iOS视图树的Widget树，如图1所示。Flutter

的控件通常由许多小型、单用途的控件组成而不是扩

展现有的控件类。小控件结合起来产生强大的效果。

类的层次结构是扁平的，使可能的组合数量最大化。

图1Flutter的Widget树

视图在运行时可能变化，因此Flutter引入了State

来管理视图状态。在修改完数据后，需要主动调用

setState()来触发视图状态的更新。根据状态是否可

变，Widget又被分为StatefulWidget和StatelessWidget，

两者都继承自Widget。其中StatelessWidget是指无可

变状态的Widget，这类Widget的状态只由创建Widget

时传入的参数决定，一旦创建，其在页面上展示的效

果就不再改变。而StatefulWidget存在可变状态。当

通过setState()改变状态时，Flutter就会重新渲染该

Widget。

1.2布局

主要使用了Row、Column、Container、Expanded、

Stack等。Row、Column提供了水平、垂直方向的布

局，Stack提供了堆叠方式的布局，各种容器有不同的

特性，可根据实际页面需求选择搭配不同的布局。

1.3插件

Flutter有很多功能强大的插件

[5]

，比如：状态管理

插件、推送、QQ、事件总线EventBus、Toast提示、图片

选择器、图片加载等。在基于Flutter的图片风格转换

App的设计与实现中运用到了状态管理插件、QQ、图

片选择器、图片加载器、图片缓存等。

2基于Flutter的UI构建

UI构造过程经历了从Widget树转换成Element树

再到最终渲染的RenderObject树。如图2所示。

图2树的转换

其中，Widget树主要存放渲染内容、视图布局信

息；Element存放上下文，通过Element遍历视图树，

Element同时持有Widget和RenderObject；Element是

对应Widget在渲染树的实例化节点。同一个Widget

可以对应渲染树中的多个Element，类似于一个视图模

板；RenderObject根据Widget的布局属性进行layout，

paintWidget传人的内容。另外，在视图描述Widget

和真实渲染的RenderObject的中间设计的Element层

对某一时刻的事件做了汇总和比对，只对真正需要修

改的部分同步到真实渲染的RenderObject树上面，提

高了渲染效率。

计算机时代2020年第2期

·69·

3图像风格转换App设计

这款App的主要功能是将用户选择的图片按照指

定风格转换并展示。用户可以将转换好的图片保存

至本地相册或分享至QQ。App的UI界面设计如图3。

(a)(b)

(c)(d)

图3UI设计图

用户首先从本地相册或者使用相机拍摄获取

需要转换风格的图片。用户选定图片后的界面如

图3(a)。点击不同风格对应窗口中的转换按钮，等待

数秒后即得到对应风格的目标图片，效果如图3(b)所

示。用户可以向上滑动界面触发分享功能，将转换好

的图片分享给QQ好友，如图3(c)，也可以下滑界面触

发保存功能，将转换好的图片保存至本地相册，效果

如图3(d)。

根据需要实现的功能，该App的主要组件为：图片

选择器、图片翻页器、图片风格转换器、相机按钮、相

册按钮以及风格转换按钮。

图片选择器用于管理图片选择，将图片从相机/相

册中导入后转换成MemoryImage类型的图片保存在

内存中，如图4所示。在导入图片的过程中，可以适当

压缩图片大小以减少内存的占用，并且根据图片的

EXIF信息把图片旋转到正常的角度，计算图片的主要

色调，用以确定图片边框颜色和按钮控件的颜色等。

图片翻页器用于管理各个风格的图片。图片风格转

换器是状态可变的Widget，用于管理图片转换的状

态。其通过图片的转换阶段来确定Widget的渲染外

观并确定是否要显示转换按钮以及调用网络请求。

图4主要Widget关系图

4重要Widget的实现

Widget的主要任务是实现build函数，定义Widget

中其他较低层次的控件，build函数依次构建这些控件

即实例化一个或者多个Element对象。通过Element

对象实现UI渲染树，直到底层渲染对象。

Flutter可以在Windows、Linux、Mac上开发，开发

工具可以使用VSCode、AndroidStudio、IDEA等，本

次开发使用AndroidStudio，主要因为AndroidStudio

提供的FlutterInspector工具可以实时审查元素，解决

界面的显示适配问题。下面举例介绍几个典型的状

态可变的Widget与状态不可变的Widget的实现：

4.1图片选择器(Stateful)

图片选择器的构造函数：

@override

Widgetbuild(BuildContextcontext){

print(lastColor);

returnFutureBuilder(

future:age(_imgPath),

builder:(BuildContextcontext,AsyncSnapshot

ageData>snapshot){

Widgetret;

if(or){

ret=Text(ng());

}else{

·70·

ComputerEraNo.22020

MyImageDatadata=;

Switch(tionState){

：

lastMainColor=;

lastTextColor=;

lastColor=;

ret=MyPageController(data,styleNames,styleJ-

son);

ret=Text(“loading”);

}

}

returnnewContainer(

color:lastMainColor,

child:addButtons(ret,lastColor),

);//Container

},

);//FutureBuilder

}

上述构造函数用于图片选择。当导入不同图片

时，该Widget需要被刷新，因此该Widget是有状态变

化的组件，需要继承自Statefulwidget类。因为加载和

计算图片的属性比较耗时，所以使用FutureBuilder对

象来观察这个耗时操作并根据该操作的不同阶段来

返回不同的Widget树。当setState()被调用时，build方

法都会重新执行以改变该Widget的状态。

4.2图片风格转换器(Stateful)

首先用Stack控件构造图片和图片的高斯模糊化

的边框，然后根据该控件的状态决定是否需要加上转

换按钮。最外层的手势监控控件（GestureDetector）用

于监视用户的手势，当用户上下滑动界面时，要让控

件产生上下位移的效果。上移触发分享的功能，下移

触发保存的功能。在手势监控控件(GestureDetector)

中编写对应用户下拉手势的动画效果：用Animation-

Controller和Tween线性的触发重绘函数(setState())，

使得控件对应用户下拉手势，并且在松手之后会有回

弹效果。同时，还可以调用onVerticalDragEnd事件。

在用户完成下拉操作时添加额外动画。

4.3图片翻页器(Stateless)

使用系统的PageController控件构造一个可以左

右翻页用于展示多种转换效果的控件。该控件通过

传入itemBuilder参数告诉控件如何渲染每页的内容。

头部的Text说明风格的种类，中间的图片风格转换器

控件用于展示图片。效果如图5所示。

图5App效果展示图

5结束语

Flutter基于Skia引擎使用Dart语言搭建了一套全

新的UI框架，底层调用OpenGL绘制，在Native和

FlutterEngine上实现了UI的隔离。开发者在写UI代

码时就不用再关心平台实现，从而实现了跨平台。此

外，Flutter可以通过平台通道与原生进行灵活通信，渲

染效率非常高，其release版的流畅度堪比原生。在排

版、图标、滚动、点击等方面，Flutter能够实现零差异。

Flutter作为一个高效开发与高性能并存的UI框架，大

大提高了移动应用的开发效率。随着Google与开源

社区的不断支持，将会有更多的开发者感受到利用

Flutter框架进行开发带来的高效体验。相信Flutter在

跨平台移动应用开发中将成为一种新趋势，受到业界

更加热烈的关注。

参考文献(References)：

[1]金诚.移动应用跨平台开发框架的比较分析[J].民营科技,

2018.10:150-152

[2]彭娟.跨平台移动应用开发技术研究[J].科学咨询(科技·管

理),2017.27:59.

[3]周勇,程子清.Flutter的原理深度剖析[J].电脑编程技巧与维

护,2018.11:19-21

[4]杜文.Flutter实战[EB/OL].rchina.

club/,2019-4-26.

[5]KeMao,MarkHarman,cTestingofMo-

bileAppsforTrulyBlack-BoxAutomation[J].IEEE

Software,2017.34(2):11-16

▲

CE