简单认识Flutter，了解flutter是什么

最新推荐文章于 2024-08-08 08:57:11 发布

zlzbt

最新推荐文章于 2024-08-08 08:57:11 发布

阅读量9.4k

点赞数 4

原文链接：https://www.jianshu.com/p/8db31a8f45cd

版权

一：什么是 Flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android 上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的

Flutter是Google一个新的用于构建跨平台的手机App的SDK。写一份代码，在Android和iOS平台上都可以运行。

从官方的的介绍来看可以总结成三点：

跨平台 现在Flutter至少可以跨 4 种平台，甚至支持嵌入式开发。我们常用的有Linux、Android、IOS，甚至可以在谷歌最新的操作系统上Fuchsia进行运行，经过第三方扩展，甚至可以跑在MacOS和Windows上，到目前为止，Flutter算是支持平台最多的框架了，良好的跨平台性，直接带来的好处就是减少开发成本。
原生用户界面： 它是原生的，让我们的体验更好，性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知，为您的用户带来全新的体验。
开源免费：同Android系统一样，这些都是免费开源的。

二：主流跨平台框架对比

ReactNative 和 Weex（Weex是使用流行的 Web 开发体验来开发高性能原生应用的框架）：执行效率是硬伤，首页不能用RN已是共识，而且目前在同一Android和iOS代码方面尚存在不足。
PWA：用纯Web的方式统一三端，很好的idea。但是需要借助Google play Service和浏览器支持，国外大部分Android手机和iOS的新版本都可以支持PWA，但遗憾的是，国内的浏览器很难统一支持PWA，这还需要时间。
微信小程序：属于微信内的生态闭环，更适合工具类和小游戏，一般都作为原生APP的延伸入口。
Flutter：在渲染技术上，Flutter选择了自己实现GDI，由于有更好的可控性，使用了新的语言Dart,避免了RN的那种通过桥接器与Javascript通讯导致效率低下的问题，所以在性能方面比RN更高一筹；有经验的开发者可以打开Android手机开发者选项里面的显示边界布局，发现Flutter的布局是一个整体。说明Flutter的渲染没用使用原生控件进行渲染。

技术类型	UI渲染方式	性能	开发效率	动态化	框架代表
H5 + 原生	WebView 渲染	一般	高	✔️	Cordova、Ionic
JavaScript + 原生渲染	原生控件渲染	好	高	✔️	RN、Weex
自绘UI + 原生	调用系统API渲染	好	高	默认不支持	Flutter

三：Flutter 的特点

1. 快速开发
毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。

2. 富有表现力和灵活的UI
使用Flutter内置美丽的Material Design和Cupertino的widget、丰富的motion API、平滑而自然的滑动效果和平台感知，为您的用户带来全新体验。

3. 响应式框架
使用Flutter的响应式框架和一系列基础widget，可以轻松构建您的用户界面。使用功能强大且灵活的API（针对2D、动画、手势、效果等）可以帮助开发者解决艰难的UI挑战。

class CounterState extends State<Counter> {
  int counter = 0;

  void increment() {
    // 告诉Flutter state已经改变, Flutter会调用build()，更新显示
    setState(() {
      counter++;
    });
  }

  Widget build(BuildContext context) {
    // 当 setState 被调用时，这个方法都会重新执行.
    // Flutter 对此方法做了优化，使重新执行变的很快
    // 所以你可以重新构建任何需要更新的东西，而无需分别去修改各个widget
    return new Row(
      children: <Widget>[
        new RaisedButton(
          onPressed: increment,
          child: new Text('Increment'),
        ),
        new Text('Count: $counter'),
      ],
    );
  }
}

浏览 Widgets 目录，了解更多关于 Flutter Widget框架概述

4. 访问本地功能和SDK并支持插件
Flutter可以复用Java、Swift或ObjC代码，访问Android和iOS上的原生系统功能。另外通过Flutter插件也可以访问原生系统功能，比如蓝牙、相机、WiFi等等。

5. 跨平台自绘引擎
Flutter与Hybrid App、React Native这些跨平台技术不同，Flutter既没用使用WebView，也没有使用各个平台的原生控件，而是本身实现一个统一接口的渲染引擎来绘制UI，这样做可以保证不同平台UI的一致性。另外采用自绘引擎后，Flutter在布局过程中不需要像RN那样要在JavaScript和Native之间通信，可以节省性能开销。Flutter使用Skia作为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了非常友好的API。

6. 采用Dart开发
Flutter App采用Dart语言来开发。与JavaScript相比，Dart在JIT（即时编译）模式下，速度与JavaScript基本持平。但是当Dart以 AOT（运行前编译）模式运行时，Dart性能要高于JavaScript。