SCI论文（www.lunwensci.com）:
摘要：随着信息化的普及,现代软件项目的市场需求越来越大,开发越来越复杂,程序员的工作量越来越大。在传统的应用开发中,不仅要求前端界面美观,而且要能够在多个平台上运行。因此,需要编写多套代码来实现不同平台的应用,这可能会导致应用开发成本高、周期长、维护成本高等问题。基于谷歌开源的Flutter框架有望解决上述问题,实现一套代码,多端运行。通过探索和实践,Flutter框架的应用不仅可以带来高效的跨平台开发体验,提高开发效率,还可以实现媲美原生移动应用的体验。前景广阔,值得软件开发工程师进行应用探索。
关键词：Flutter框架；跨平台；前端开发；项目实战
Analysis of the Application of Flutter Framework in Front-end Development
SHU Hongmei,FU Qingfang,ZHANG Yan,WANG Yan,DONG Zemei,ZHOU Yuanjie
(Sichuan Tourism University,Chengdu Sichuan 610100)
【Abstract】：With the popularization of informatization,the market demand for modern software projects is increasing,development is becoming more and more complicated,and the workload of programmers is increasing.In traditional application development,not only the front-end interface is required to be beautiful,but also to be able to run on multiple platforms.Therefore,it is necessary to write multiple sets of codes to implement applications on different platforms,which may lead to problems such as high application development costs,long cycles,and high maintenance costs.The Flutter framework based on Google's open source is expected to solve the above problems,realize a set of codes,and multi-terminal operation.Through exploration and practice,the application of the Flutter framework can not only bring an efficient cross-platform development experience and improve development efficiency,but also achieve mobile applications comparable to the original experience.The prospects are promising and it is worthy of application exploration by software development engineers.
0引言
在“互联网+”信息技术迅猛发展的背景下,移动设备应用的需求日益增加。现今主流的移动应用程序(App)开发方式有三种：除了以往熟知的原生应用(Native App)开发,如安卓开发、iOS开发以外,还有Web App开发以及混合开发(Hybrid App)。但以上三种开发模式或多或少都存在一些弊端：原生应用开发需使用对应平台支持的开发工具和编程语言,使得开发成本高、维护难度大、支持的设备和系统具有局限性、上线时间无法精准控制、对于新版本,用户必须更新下载安装。对于Web App来说,因为要适配不同的浏览器导致开发维护成本高,同时资源异步加载没有原生应用快,有些功能受限,用户体验较差。混合开发的不足则取决于原生应用和Web应用的所占比例,集Native App和Web App的优缺点于一体。因此,许多开发人员面临“如何使用同一套代码兼容多个平台,而又不带来运行速度和产品保真度损失”的问题[1-3]。
近年来随着前端跨平台应用技术的讯速发展,越来越多的开发者投入到跨平台开发的学习和研究中,从而涌现出了诸如Cordova、Ionic、React-native、Weex、Kotlin-native、Flutter等框架。其中Flutter凭借界面美观、快速渲染、免费开源等优势,在国内外广受欢迎,已有互联网巨头公司应用Flutter开发了相应的应用程序,例如eBay的Motors服务、阿里的蚂蚁金服、字节跳动的头条以及美团App。
Flutter提供了一套既能用原生ARM代码直接调用的方式来加速图形渲染和UI绘制,又能同时运行在两大主流移动操作系统上的解决方案。因此,本文将针对前端开发技术中Flutter框架的发展现状、体系架构、项目实战和发展前景进行分析与探究。
1 Flutter框架分析
1.1框架概述
Flutter是谷歌最新开发的一套开源跨平台UI框架,只需一套代码即可构建原生编译的移动端设备、Web以及PC桌面应用程序,实现跨平台的应用,减少开发者的代码工作量和开发成本[1]。
Flutter是一个可扩展的分层系统,由一系列独立的库组成,每个库都依赖于底层。任何层都不能特权访问下层,且框架层的每个部分都是可选和可替换的。其架构如图1所示,大体上被分为Embedder、Engine和Framework三层。最底层的Embedder嵌入器适配,可使Flutter嵌入到任何平台。中间层Engine（引擎）是一些C++库,包含Skia、Dart和Text等部件,其中Skia是开源的二位图形库,实现Skia引擎；Dart则包括runtime、Garbage Collection、编译模式支持等；Text是文本渲染,排版引擎,通过JIT或AOT模式运行Dart代码,负责和上层Dart Framework进行绘制方面的交互。最上层Framework,是Google用Dart语言开发的一套基础库,包括Widget、手势、绘图、动画等,有Material和Cupertino风格。
对于底层操作系统,Flutter与其他任何原生应用程序的打包方式相同。特定于平台的Embedder提供了一个入口点：与底层操作系统协调,以访问诸如渲染界面、可访问性和输入之类的服务；同时提供管理消息事件循环的功能[2]。Embedder以适用于该平台的语言编写：比如,Android使用Java和C++,iOS和macOS使用Objective-C/Objective-C++,Windows和Linux使用C++。借助Embedder,可以将Flutter代码作为模块集成到现有应用程序中。Flutter包含许多用于通用目标平台的Embedder,但也存在其他Embedder[3]。
中间层Engine是Flutter的核心,主要用C++编写,并支持所有Flutter应用程序提供所必需的原语。每当需要绘制新帧时,引擎负责对合成场景进行栅格化。它提供Flutter核心API的低级实现,包括图形,文本布局,文件和网络I/O,可访问性支持,插件架构以及Dart运行时和编译工具链[3]。
上层Framework由引擎通过dart:ui暴露,Framework将基础C++代码包装在Dart类中。该库公开了最低级别的原语,例如用于驱动输入,图形和文本呈现子系统的类。通常,开发人员通过Framework与Flutter交互,该Framework提供了一种以Dart语言编写的现代、反应式架构。它包括由一系列层组成的一组丰富的平台、布局和基础库。从底部到顶部,依次有：（1）Foundational基建类,以及诸如动画、绘画和手势之类的模块构建服务,它们提供了底层基础之上的常用抽象。（2）Rendering渲染层为处理布局提供了抽象。使用此层能构建可渲染对象的树,也可以动态地操作这些对象,树会自动更新布局。（3）Widgets小部件层是一个合成抽象。渲染层中的每个渲染对象在小部件层中都有一个对应的类。此外,小部件层允许你自定义可重用的类的组合,是一个引入反应式编程模型的层[3]。（4）Material和Cupertino库提供了全面的控件集,这些控件使用小部件层的合成原语来实现Material或iOS设计语言。Framework相对较小,开发人员可能使用的许多高级功能都作为软件包实现,包括平台插件(如Camera和Webview)以及与平台无关的功能(如基于核心Dart和Flutter库的字符,Http和动画)。其中一些软件包来自更广泛的生态系统,涵盖应用内支付、Apple身份验证和动画等服务。
1.2 Flutter架构特点
Flutter的目标是帮助开发者在任何平台上构建美观的原生应用,除了移动端Android和iOS平台外,其支持范围还将扩展至Web、Windows、macOS和Linux等其他平台。基于Flutter框架的开发,一切内容皆组件。
Flutter具有一致的统一对象模型：Widget。Flutter的核心原则是一切皆组件(即Widget),Widget是Flutter应用程序用户界面的基本构建块,每个Widget都是用户界面部分的不可变声明。其组件分为两种：有状态组件(StatefulWidget)和无状态组件(StatelessWidget),这两种组件的区别在于有状态组件主要基于用户交互或其他因素进行更改,让界面的数据进行实时更新；而无状态组件的数据在界面中不需要进行实时的修改更新。在实际的项目开发中可以通过与其他Widget组合来控制Widget的布局。例如,要将Widget居中,可以将其封装在Center Widget中。或者是Widget需要根据用户交互或其他因素进行更改,就使用有状态组件构建页面。
Widget的构建原理：通过实现Build返回Widget树(或层次结构)来定义Widget的独特特征,这棵树更具体地表示了用户界面的Widget层次。例如,工具栏Widget的Build函数可能返回一个包含一些文本和各种按钮的水平布局。然后,框架递归构建Widget,直到所有Widget构建完成,Framework将它们一起添加到树中。每当需要被构建时,Widget会返回一个新的Widget树,无论Widget以前返回的是什么,Framework会将之前的构建与当前构建进行比较并确定需要对用户界面进行哪些修改,这种自动比较非常有效,可以实现高性能的交互式应用程序[4]。
Flutter框架具有如下几个特性：
（1）高性能：具有原生应用的界面渲染性能。Flutter在发布之初期望达到120fps,甚至可以达到游戏及VR应用的渲染效率的要求。如美团用Flutter写了一个全品类页面,经过数据统计,渲染10000帧过程中,Android原生平均耗时10.21ms,Flutter平均耗时12.28ms[5]。这是在没有对Flutter的页面做任何过度绘制、缓存优化的前提下的测试结果。（2）UI美观：开发者可以通过Flutter控制屏幕上的每一个像素,从而在不同平台上实现一致的外观呈现效果,还可使用Material和Cupertino风格的UI组件。（3）开发敏捷：Flutter具有热重载功能,对比原生应用耗时的开发流程(编辑、编译、安装、启动、显示)更显优势。（4）提供本地功能和SDK的访问：Flutter允许复用现有的Java、Swift或Obj-C代码,访问iOS和Android上的原生系统功能和系统SDK。通过平台相关的API、第三方SDK和原生代码让应用接近原生应用的丰富功能。（5）开源：任何开发者都可以在GitHub上获取Flutter的源码,并贡献自己的代码。
2 Flutter框架的应用探析
2.1 Flutter框架的优势分析
Flutter本身是一个类似于React Native、WEEX、Hybrid等多端统一跨平台解决方案的框架,真正做到了一次编写,多处运行。借助Flutter框架,工程师可以体验到跨平台开发的高效。为了探析Flutter框架的优势,我们选择了目前热度较高的跨平台框架React Native和WEEX进行比较。如表1所示列出了三者的比较内容及分析结果。
从表中结果可知,在性能方面：Flutter表现最优。与React Native原理不同,Flutter是通过自己的渲染引擎来实现界面的快速渲染,从而让用户的体验感更好。在社区活跃度方面：Flutter活跃度最高,React Native次之,WEEX则从2020年就不再更新。综合来看,Flutter是目前最好的跨平台解决方案之一,只需一套代码便可生成Android和iOS两种平台上的应用,很大程度上减少了App的开发和维护成本。同时Dart语言具有强大的性能表现和丰富的特性,也使得跨平台开发变得更加高效[6]。
2.2基于Flutter的鲜花商城App设计与实现
通过对Flutter框架的认识和理解,我们以“鲜花商城”项目为例,完成了基于Flutter框架的跨平台响应式页面设计与实现。Flutter鲜花商城App是一个立足于成都市本地的应用,旨在整合鲜花资源,为顾客和商家提供一个商品选购与交易平台,主要功能是售卖鲜花、盆栽和与鲜花相关的周边产品。整个App采用组件布局,整体视觉风格简约、配色大方,以各种鲜花为主体,能给用户带来美的视觉享受,大大提升了用户体验。同时能够适应不同的平台,如Android和IOS,具有媲美原生移动应用的效果。鲜花商城的功能架构如图2所示,首页实现效果如图3所示。
3 Flutter框架的发展趋势
Flutter既广泛应用于Android和IOS开发,也在移动Web的开发上取得了一定成绩。由谷歌举办的Google IO 2019年度开发者大会,让开发者认识了Flutter Web技术。这是继Flutter支持Android、IOS等设备之后,又一个里程碑式的版本,后续还会支持Windows、Linux、MacOS、Chroms等其他嵌入式设备。
目前Flutter在GitHub社区的活跃度越来越高,说明更多的人开始关注并使用Flutter这项技术。全球已有一百多万的Flutter开发者,从个人开发者到初创公司,以及阿里巴巴、腾讯、美团、京东、Groupon、Capital One和eBay等大型公司都在使用。由此可以看出Flutter具有很大的发展潜力,值得开发者学习和研究。
4结语
本文通过分析和比较Flutter框架的结构与优势,设计并实现了基于Flutter框架的鲜花商城应用程序,验证了Flutter快速构建跨平台应用的特征。通过运用Flutter框架进行开发,诠释了“一套代码,多端运行”的好处,解决了软件跨平台所面临的难题,提高了软件开发者的开发效率,可提供较好的用户体验。近年来,随着越来越多的开发者开始关注和使用Flutter框架,其在未来的发展前景值得我们关注和期待。
参考文献
[1]Flutter架构概览-Flutter中文文档-Flutter中文资源[OB/EL],2021-03-01.https://flutter.cn/docs/resources/architectural-overview.
[2]周勇,程子清.Flutter的原理深度剖析[J].电脑编程技巧与维护,2018(11):19-21.
[3]杜文.Flutter实战•第二版[M].北京:机械工业出版社,2020.[4]亢少军.Flutter技术入门与实战[M].北京:机械工业出版社,2019.
[5]Flutter原理与实践-美团技术团队[OB/EL],2021-03-01.https://tech.meituan.com/2018/08/09/waimai-flutter-practice.html.
[6]李琨,贾立伟,石晓明.基于Flutter框架医学信息技术课程SPOC移动学习平台的设计与实现[J].电脑知识与技术,2020,16(6):63-64.
关注SCI论文创作发表，寻求SCI论文修改润色、SCI论文代发表等服务支撑，请锁定SCI论文网！
文章出自SCI论文网转载请注明出处：https://www.lunwensci.com/jisuanjilunwen/37776.html
