Flutter的使用感受

谷歌官方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。具体的可以看flutter官网的介绍。

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 {
  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: [
            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这方面不太懂，但是有科学梯子即可，我是这样的根据 flutter doctor 命令不停的更新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 界面开发