导语:今天在巴塞罗那召开的MWC(世界移动通信大会)发布会上,Google正式发布了Flutter跨平台UI框架的1.2版本。Flutter是什么?优势在哪里?基于什么代码实现?本文将为您一一解答
自从2018年春Flutter技术最早在谷歌大会上亮相,到12月Flutter1.0的正式发布,再到如今的1.2版本,Flutter这个全新的技术在前端领域曝光越来越多,“Flutter是什么?优势在哪里?基于什么代码实现?未来前景如何?新手入门难吗?……”带着这样的问题小伙伴们想必不在少数。今天我们请到Flutter技术的高手,国内首本Flutter出版书籍《Flutter技术入门与实战》作者,捷智云视频会议系统联合创始人亢少军老师为我们讲解Flutter技术,带领大家轻松入门!
Flutter简介
Flutter制作的精美界面
渲染引擎Skia
Skia是Google研发的包括图形、文本、图像、动画等多方面的图形引擎,不仅用于Google Chrome浏览器,Android系统也采用Skia作为绘图处理引擎。
Androis iOS Mac Win Linux 一致的UI
Android效果图
iOS 效果图
Mac效果图
Win效果图
移动端跨平台开发技术演进
移动端从Hybird Cordova —>ReactNative —> Flutter 几个方面详细的分析了跨平台开发所使用的技术,如下图:
图中ReactNative使用了OEM的组件,所以在不同平台上UI表现很难一致,但Flutter使用自己的一套原生控件,就很容易得到一致的体验。假设你全部使用Material风格的组件,不管是在iOS还是在Android,甚至在Win Mac Linux上展示都是一样的。
Flutter商用情况
Flutter动画官方示例
Flutter系统架构
下面的图片是Flutter框架结构图,对大部分开发者而言,最常用的是Widgets层,也就是UI组件。其中有两套风格的一个是Material,一个是Cupertino。然后是渲染层Rendering,然后是动画,绘制,及手势层。底层是Engine层使用C++语言编写,保证其性能,其中Skia是它的图形处理技术,Dart指Dart语言解析,Text指纹理渲染。
GPU渲染
下图展示了Flutter的绘图原理,Flutter框架直接使用Skia引擎来渲染,因此能够控制渲染帧数,从而实现高帧速率
状态控制
下图展示了Flutter的状态变化情况,从图中可以看出,当状态发生变化时会调用build方法使得界面重写渲染,所以这里大家需要改变一下思路,想控制界面的变化,可以在组件上编写一个变量,当需要改变这个界面时,调用setState方法改为这个变量即可。
一切皆为Widget
Flutter一切皆为组件,包括布局控件,手势,动画等内容。从下图可以看到Widget主要分为两大类,StatefulWidget有状态的及StatelessWidget无状态的组件。
布局思路
如何布局
下图是Flutter官方的一个示例,首先把界面拆分成按垂直方向拆分成四大块,垂直使用Column布局,然后分别实现每一部分内容即可。
第一步:
使用图片Image组件
第二步
使用水平布局Row添加标题及图标文字
第三步
使用水平布局Row添加图标及文字
第四步
使用文本区域组件添加简介
细节拆分
下面两部分均采用了水平及垂直嵌套布局。首先从横向上看采用水平布局,均分成三块。第一张图左侧标题部分采用了垂直布局添加两行标题。第二图可以把图标加文字抽象出一个方法来,采用垂直布局,传入图标及文字内容即可。
Flutter插件通讯原理
下图是平台通道的结构概述,使用MethodChannel在上层和底层之间传递消息。MethodChannel就类似一个方法通道的功能,所以MethodChannel的name上下层一定要保持一致,上层调用底层的方法,底层处理好后返回给上层数据。注意这个过程是异步的,所以一定要采用async/await关键字。
H5与Flutter对照
H5和Flutter可以找到很多的相同点,如下图所示。大致可以这么类比:
Div —> Container
padding —> Padding
margin —> Margin
同时Flutter采用CSS里的Flex布局,非常灵活。
实战课程
想学习的小伙伴请打开如下地址:
https://edu.csdn.net/course/detail/19564
课程视频录像将于2.28上传至csdn学院,敬请期待。
课程地址:
https://edu.csdn.net/huiyiCourse/detail/953
需要学习课件的小伙伴,请在后台回复:Flutter
由亢少军老师编写的国内首本Flutter相关书籍,《Flutter技术入门与实战》现已上线!从实战角度讲解Flutter,从基础组件到综合案例,从工具使用到插件开发,包含大量精选案例和详细实操步骤,还有配套视频课程可帮助读者快速入门。
点击图片购买
相关阅读: Flutter开发相比React-Native优势在哪里?高手为你答疑解惑!https://mp.weixin.qq.com/s/sy8E4oPOad9XW6sVm34p3A
点击下方▼“阅读原文”▼查看亢少军老师的博客
喜欢就点「好看」吧 !