一:什么是 Flutter

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

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

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

  • 跨平台 现在Flutter至少可以跨 4 种平台,甚至支持嵌入式开发。我们常用的有LinuxAndroidIOS,甚至可以在谷歌最新的操作系统上Fuchsia进行运行,经过第三方扩展,甚至可以跑在MacOSWindows上,到目前为止,Flutter算是支持平台最多的框架了,良好的跨平台性,直接带来的好处就是减少开发成本。

  • 原生用户界面: 它是原生的,让我们的体验更好,性能更好。用官方的话讲就是平滑而自然的滑动效果和平台感知,为您的用户带来全新的体验。

  • 开源免费:Android系统一样,这些都是免费开源的。

二:主流跨平台框架对比

  • ReactNative 和 Weex(Weex是使用流行的 Web 开发体验来开发高性能原生应用的框架):执行效率是硬伤,首页不能用RN已是共识,而且目前在同一AndroidiOS代码方面尚存在不足。

  • 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 DesignCupertinowidget、丰富的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可以复用JavaSwiftObjC代码,访问AndroidiOS上的原生系统功能。另外通过Flutter插件也可以访问原生系统功能,比如蓝牙、相机、WiFi等等。

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

6. 采用Dart开发
Flutter App采用Dart语言来开发。与JavaScript相比,DartJIT(即时编译)模式下,速度与JavaScript基本持平。但是当DartAOT(运行前编译)模式运行时,Dart性能要高于JavaScript

 

参考学习网站:Flutter 中文网

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐