Flutter的热度在这两年不断攀升被越来越多的知名公司应用在自己的商业APP中参与Flutter生态建设的人也越来越多并且是完全免费、开源的。Flutter作为跨端的UI框架为我们带来的是“快速开发、富有表现力和灵活的UI、原生性能”目前看来学习和参与Flutter生态建设是一件有价值的事情。Flutter简介Flutter是Google的移动UI框架可以快速的在IOS和Android上构建高质量的原生用户界面。通过Dart语言开发App一套代码同时运行在三个移动平台包括FluchsiaGoogle新的自研操作系统。简单来说Flutter是一款移动应用程序SDK包含框架、控件和一些工具在可以跨端构建应用的同时提供原生一样的性能。为什么是Flutter对比Hybird技术也就是H5加原生混合开发。这类框架的主要原理就是将APP的一部分或绝大部分内容通过H5来实现通过原生的网页加载控件WebViewAndroid或WKWebViewIOS来加载。H5部分是可以随时改变而不用发版同时由于H5代码只需要开发一次就能同时在IOS和Android两个平台运行也就是说H5部分功能越多开发成本就越小。原生开发可以访问平台所有的功能而在混合开发中H5代码是运行在WebView中而WebView的实质就是浏览器内核对于大多数的系统能力都没有访问权限包括无法访问文件系统不能使用蓝牙等。所以H5不能实现的功能都需要原生来做原生代码会预先实现一些访问系统功能的API然后暴露给WebView以供JavaScript进行调用WebView就成了JavaScript与原生API之前的通信桥梁主要负责JavaScript与原生之间传递调用消息然而消息传递必须遵守一个标准协议它规定了消息的格式与含义我们把这种工具称之为WebView JavaScript Bridge简称JsBridge它是混合开发的核心。对于H5加原生混合开发来说优点是更改内容不需要发版使用web技术栈社区资源丰富。缺点在于性能不好并不能完全脱离原生对于复杂的用户界面或者动画WebView不堪重任。例如某项目中使用的就是H5加原生混合开发在处理图片上传时仍然需要原生代码来实现打开相册等系统功能原生与H5进行大数据量传值时性能很差甚至崩溃IOS在上架时是不允许整个APP都是H5至少一级页面不能是H5导致IOS的原生代码功能比Android多了很多代码及其难维护虽然使用了混合开发但是仍然需要专门的IOS和Android开发人员对于上述问题Flutter这种跨平台的移动UI框架是一个比较好的解决方案。极高的开发与交付效率良好的开发体验优秀的跨多端多平台能力极强的UI表现力使我们完全可以放弃使用Hybird。与其他技术章的对比后续会在其他文章中做详细介绍。配置开发环境Flutter可以安装在WindowsmacOS和Linux上我们可以在macOS下同时进行Android和IOS设备的测试但是Windows下不可以进行IOS设备的测试。1.官网下载Flutter SDK。2.将Flutter的bin目录添加到path中。3.执行flutter doctor它会安装flutter以及dart并且检查其他需要安装的依赖。4.关于镜像国内访问Flutter有时会受到限制也可以使用一些国内镜像包括上海交大Linux用户组、清华大学TUNA协会、腾讯云开源镜像站等。配置IDE任何文本编辑器和命令行工具都能构建Flutter应用程序。使用编辑器查看可以获得更好的编程体验。例如代码补全、语法高亮、widget编辑辅助、运行和调试支持等。我们可以使用Android Studio、IntelliJ或VS Code添加编辑器插件下面介绍VS Code如何安装。1.打开VS Code选择扩展。2.搜索框输入Flutter并安装。3.重启VS Code并执行flutter doctor查看输出是否有问题。创建应用1.VS Code选择查看-》命令面板或者CtrlShiftp选择’Flutter: New Application Project’.2.选择项目路径输入项目名称按回车创建项目。注意项目目录最好不要包含中文路径否则在运行模拟器是会报路径警告如下图也可以手动禁用此警告。3.等待项目创建并显示main.dart文件。运行应用1.安装安卓模拟器并在VS Code中选择对应的模拟器。2.F5或者调用DebugStart Debugging。3.等待模拟器和应用程序启动。4.如果一切正常在应用程序运行成功后会在模拟器中看到应用程序。项目目录结构1.android – Android部分的工程文件。2.build – 项目构建输出路径例如Android打包后的apk文件。3.ios – IOS部分的工程文件。4.lib – 存放dart源文件。5.lib – main.dart – 项目创建时生成的入口文件类似vue的main.js文件。6.test – 测试相关文件。7.pubspec.yaml – 项目相关配置和依赖文件类似vue的package.json文件。组件在Flutter中一切皆是组件Widget采用现代响应式框架构建这是从React中获得的灵感中心思想是用Widget来构建UI。当Widget的状态发生变化时会重新构建UIFlutter会对比前后变化的不同已确定底层渲染树从一个状态转换到下一个状态所需要的的最小改变类似React/Vue中虚拟DOM的diff算法。Widget的子类和间接子类有350之多大部分组件是平时很少用到的作为初学者我们只需要学习那些常用的组件即可。官网中提供了按类别浏览widget方便我们查找和学习。组件树Flutter创建App时所有的组件最后会生成一个组件树例如下面代码Main函数是程序入口运行MyApp组件显示Hello Word生成如下组件树有状态组件和无状态组件Flutter 中组件分为 无状态组件StatelessWidget和有状态组件StatefulWidget两种。它们唯一的区别就是运行时重新加载组件的方式不同StatelessWidget 组件重新加载时重新创建当前组件的实例而StatefulWidget组件重新加载时不会重新创建实例而是重新执行 build 函数。StatelessWidget组件创建代码build 函数返回当前组件此组件一旦创建将不可改变build 函数只能执行一次。如果想重新绘制此组件只能重新创建此组件新的实例。StatefulWidget组件创建代码StatefulWidget 组件的创建方式和 StatelessWidget 不同State 中的 build 函数返回当前组件有状态的组件可以在其生命周期内多次重绘即多次调用 build 函数而不是创建一个新的实例。Material 和 CupertinoFlutter 中包含两套风格的组件分别是 Material 和 Cupertino Cupertino 是 iOS风格的组件命名都带 Cupertino 前缀比如 CupertinoSlider 、 CupertinoDatePicker 等 Material Design 是由 Google 推出旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 Flutter 使用一套代码在不同的平台上表现一致它不会根据不同的平台绘制不同的外形比如使用 AlertDialog 弹出警告框不管在 Android 上还是在 iOS上效果是一样。 但有一些功能 Flutter 区分平台比如 ListView 滑动到底部时继续滑动Android 底部会出现淡蓝色默认情况下拱形而 iOS 上则没有这是因为 Flutter 在封装此组件时在代码中区分了平台所以在查看 Flutter 源码到过程中会经常看到根据不同的平台做不同处理的情况。总结与应用Flutter的学习成本主要还是在组件的熟悉度上能熟悉常用的组件并配合官网文档就可以上手项目了整体的开发界面的思维与React/Vue很相似不过代码在视觉上感官比较差只要页面够复杂就会陷入到无穷尽的嵌套中。Flutter学习资源比较丰富除去官网资源和Github以外由于源码是开源的源码注释的非常详细可以解决大部分问题。社区中StackOverflow上Flutter的活跃度也很高Flutter的开发团队成员也经常会在上面回答问题。国内的掘金Flutter社区也是官网推荐的社区。