欢迎您光临深圳塔灯网络科技有限公司!
电话图标 余先生:13699882642

网站百科

为您解码网站建设的点点滴滴

Flutter的使用感受

发表日期:2018-08 文章编辑:小灯 浏览次数:4673

谷歌官方6月21日宣布Flutter的首个发布预览版(Release Preview 1)正式发布,这标志着谷歌进入了Flutter正式版(1.0)发布前的最后阶段。

听我们大神说这个东西有搞头,之前有做过一段时间ionic,了解过一些mobilephone的东西。所以最近开始捣鼓下flutter。这里记录一下作为一个iOS Developer的使用感受和一些心得体会。

Flutter是什么

Flutter是一个由谷歌开发的开源移动应用软件开发工具包,用于为Android和iOS开发应用,同时也将是Google Fuchsia下开发应用的主要工具。Flutter框架包含了两套匹配特定设计语言的组件。称作Material Design的组件实现的是同名的谷歌设计语言,称作Cupertino的组件模仿了苹果iOS的。---维基百科

简单来说它与RN、Ionic、Weex等众多混合开发平台框架一样,都是一套代码实现多平台发布的跨平台框架。Flutter是以dart为基础做出的一套SDK,支持在Android和iOS上构建APP。具体的可以看flutte?r官网的介绍。

Flutter与其他Hybird框?架的不同

首先要说的就是他的构建方式,?有说到它属于Dart的一个SDK。我觉得Flutter与其他跨平台的最大不同之处是它自建了一个2D渲染引擎,在性能上要比其他基于js的框架好上很多,后面会讲到具体性能部分。
代码风格和java比较接近,个人感觉和前端标签也很像,有人说喜欢XML布局的对于Dart会比较难受。它的UI布局思想是一切皆为widget,大家感受一下:

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', theme: new ThemeData( ), home: new MyHomePage(title: 'Flutter Demo Home Page'), ); } }class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key);final String title;@override _MyHomePageState createState() => new _MyHomePageState(); }class _MyHomePageState extends State<MyHomePage> { int _counter = 0;void _incrementCounter() { setState(() { _counter++; }); }@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. title: new Text(widget.title), ), body: new Center( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( 'You have pushed the button this many times:', ), new Text( '$_counter', style: Theme.of(context).textTheme.display1, ), ], ), ),floatingActionButton: new FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: new Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } } 

上面这个是初始化flutter的时候默认的代码。


效果图

就我个人而言,第一眼看到这个的时候觉得还算好,当我自己写了一份个人中心的时候发现真的是有点心累,一行行的堆叠真的是很烦,每一个都有子类然后还有继续堆叠,在开发APP的时候最不喜欢的事就是多层嵌套,尤其是逻辑判断的时候。我们都会想着尽量简化逻辑代码不简化逻辑达到我们想要的效果,避免因为多层嵌套逻辑使代码没有可读性维护性,本着这个思想后重新对他做简化,发现下面提到的5个重点中所有东西都是一个小部件是核心内容,你把每一个嵌套都拿出去做一个View来看就会变得很简单,尤其是flutter是一种响应式框架。

使用时遇到的坑和一些提醒

首先要说的是一定要用编辑器,真的。。。
1.我在第一次配置时直接clone了flutter的仓库,配置环境变量。在配置的过程中一直卡在改PATH这,为什么呢?因为我懒直接复制了官方的终端命令,在都配置完事后回头调查PATH错误问题是发现是文档给的命令多了一个空格。。。Ps:现在已经更改掉了,而且贴心的使用了pwd,请放心复制。
2.千万别升级到最新系统,在配置的过程中想体验一下新的夜间模式,更想耍一下黑色背景的Xcode。我把系统升级到了Mojave,然后惊喜的发现几个必要工具装不上(libimobiledevice,ideviceinstaller)Ps:开心~,在前几天这个问题也被解决了!如果你是最新系统,有提示你升级Xcode的时候你发现你是最新的Xcode,参照下图改一下就好了。

切换Command Line tools
3.Android这方面不太懂,但是有科学梯子即可,我是这样的根据 flutterdoctor 命令不停的更新Android需要的文件,最终都可以解决。
4.使用编译器可以省去很多步骤,也可以漂(lan)亮(duo)的开发~,当然你还是要配置一些必要工具,如第二条所写,但是可以帮你节省配置路径问题
5.pod setup 你会等到你怀疑你的人生到底是为了写代码还是看他不停地报错,最简单的方法是直接在github上下载一份zip文件(cocoapod有个叫Space的文件)然后到这个路径下cd $HOME/.cocoapods/repos(如果你setup了一般都会有,真没有你就创建一份呗)把刚刚下载的zip文件解压到这里。重新pod setup下就可以了(不可以的尝试pod search下建立下索引)。
6.在开发过程中发现必须要开启一个模拟器,无论是安卓的还是iOS的,无论真机还是模拟器必须有一个在运行中才能启动APP。当你同时连接多个时具体会连哪一个我还没找到文档说明,但是实际情况是一定会先连真机。
7.Debug和Release的ipa方式不一样,你需要在 Flutter代码项目下面执行

 flutter build aot --release --target-platform ios --ios-arch armv7,arm64 

去 build目录下找到 App.framework替换iOS文件夹下的同文件
然后把 Flutter.framework替换成 flutter/bin/cache/artifacts/engine/ios-release/Flutter.framework的这个。
PS:其他还有的会继续补充,如果有你发现的新问题随时欢迎留言~

探讨

为什么使用flutter

Google Flutter--5 reasons why you may love it:

  • 热重载(这个感觉还一般,而且比较费内存也无法真正测试你的APP性能)
  • 全套小部件(这是我最喜欢的)
  • 所有东西都是一个小部件(这个也不错)
  • Android / iOS 差异化主题(iOS:Cupertino,Android:Material Design)
  • 非常、非常、非常多的资源 (官方支持的资源很多,比如上边的代码有自带的themedata,scaffold,tarbar等等会节省你太多的开发时间,我觉得weex开发者会有深刻的体会吧)
  • 我觉得还可以加一条,就是他的响应式框架,响应式试图- - - 不需要 JavaScript 的桥接器。目前已知的ReactX包含了众多的响应式语言,RxDart对于flutter或者说Dart来说只是一个增强包,下面也会稍微详细的说一下。
响应式框架

核心原则:
Flutter包括一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具。这些组件可以帮助您快速地设计、构建、测试和调试应用程序。

Flutter框架

下面这个是组合型视图:


视图树

还有代理性的ProxyWidget作用是数据传递以及展示型的widget,具体的大家可以自己查找一下。
StatefullWidget存在中间状态变化且都是immutable的,状态变化存储在哪里?Flutter 引入state的类用于存放中间态,通过调用state.setState()进行此节点及以下的整个子树更新。在iOS中的Controller有生命周期,那么state的周期呢?

initState(): state create之后被insert到tree时调用的 didUpdateWidget(newWidget):祖先节点rebuild widget时调用 deactivate():widget被remove的时候调用,一个widget从tree中remove掉,可以在dispose接口被调用前,重新instert到一个新tree中 didChangeDependencies(): 初始化时,在initState()之后立刻调用 当依赖的InheritedWidget rebuild,会触发此接口被调用 build(): After calling [initState]. After calling [didUpdateWidget]. After receiving a call to [setState]. After a dependency of this [State] object changes (e.g., an[InheritedWidget] referenced by the previous [build] changes). After calling [deactivate] and then reinserting the [State] object into the tree at another location. dispose():Widget彻底销毁时调用 reassemble(): hot reload调用 
性能

和 React Native 一样,Flutter 也提供响应式的视图,Flutter 采用不同的方法避免由 JavaScript 桥接器引起的性能问题,即用名为 Dart 的程序语言来编译。Dart是用预编译的方式编译多个平台的原生代码,这允许Flutter直接与平台通信,同时使用Skia图形引擎来完成图形、文本、图像、动画等绘制,拥有自己独立的一套图形系统,不再依赖于原生。而不需要通过执行上下文切换的 JavaScript 桥接器。编译为原生代码也可以加快应用程序的启动时间。虽然比其他框架来说不需要JavaScript桥接器,但是性能相对于native来说还是有差距的,至少现在的preview版本来说内存利用以及CPU的使用上都是赶不上native的。我在做测试的时候发现内存使用率上一致居高不下,但是后来发现应该是热更新造成的,当我想在release模式的时候发现又出现更多问题,具体的看编译内容,推荐看下这篇文章How fast is Flutter? I built a stopwatch app to find out.
总结来说就是说,虽然实用了自己的渲染引擎,但是由于视图的刷新是整个widget刷新(理念就是任何都是widget),而原生方面(仅以iOS为例)刷新的只是label的文案,而不需要重新创建label。优化的方式是单独建立每一个元素内容。由此引出,为啥官方文档建议尽量使用无状态的StatelessWidget,除非有必要在使用StatefulWidget。
后续我会给出RN,Flutter及iOS原生的内存及CPU使用率的图以供参考。

编译

Flutter 是支持原生页面和 Flutter 页面混合开发的,但是不支持原生组件在Flutter 中使用,原生端有 methodchannel 来支持 Flutter 对原生的一些API调用。
我们现在已有项目如果想介入Flutter怎么办?集成现有iOS项目这个是官方给出了一些步骤,但我觉得不是正八经的告诉你怎么做,只是一个解决的办法。需要你自己去把Flutter.framework及App.framework+info.plist导入已有工程,且需要你更改appdelegate为flutter的来做一次继承。
在踩坑的时候发现链接器在编译可执行文件的时候还会出现错误。。。后来我们大神说更新下package就好了,这是一个已知问题且已经修复。

总结

Flutter是一个很好的多平台开发解决方案框架,可以帮助你节省很多开发时间。但就目前来看,虽然Flutter没有使用JavaScript桥接器来与native连接,自有一个2D渲染引擎。但对于如今这个需要性能,用户体验的时代来说这并不能达到我们的要求。同时在编译过程中又有各种的问题,最基础的一件事就是当你需要打包的时候,你无法预测会发生什么错误导致打包失败---这主要跟过长的操作过程有关。

  • 所以当你是一个初学者要学习编程的时候,这个语言并不是一个能让你节省时间的工具。
    如果你有一定的移动端开发基础,你可以尝试下使用flutter,尤其当你没领略过响应式框架及链式语法的魅力。

  • 如果你想对现有项目做集成可以看下闲鱼的文章,他们已经接入了Flutter,并深度的解读了可行性。
    如果说你的项目并没有使用大量H5或者集成过其他Hybird框架,那么我不建议你们接入Flutter,这会让你醉生梦死,尤其在你并没有搞清楚Dart做了什么的时候。

Ps:还少一些Reactive的东西没有整理完,后续会接着这篇发上来。

引用:
Flutter中文网
移动开发新利器 | 一文深入了解 Flutter 界面开发


本页内容由塔灯网络科技有限公司通过网络收集编辑所得,所有资料仅供用户学习参考,本站不拥有所有权,如您认为本网页中由涉嫌抄袭的内容,请及时与我们联系,并提供相关证据,工作人员会在5工作日内联系您,一经查实,本站立刻删除侵权内容。本文链接:http://dengtar.com/18385.html
相关APP开发
 八年  行业经验

多一份参考,总有益处

联系深圳网站公司塔灯网络,免费获得网站建设方案及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:余经理:13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.