Flutter是什么?

  • 内容
  • 评论
  • 相关

现在,主流的移动开发平台是 Android 和 iOS,每个平台上的开发技术不太一样,针对每个平台开发应用需要特定的人员,但这样一来开发效率会变得低下,因而需要进行跨平台开发。

移动端跨平台开发技术

跨平台技术从最开始的 Hybrid 混合开发技术,到 React Native 的桥接技术,再到 Flutter 的自建 UI,一直在演进。

Hybrid 开发主要依赖于 WebView,但 WebView 是一个重量级的控件,很容易产生内存问题,而且复杂的 UI 在 WebView 上显示的性能不好。

React Native 技术抛开了 WebView,利用 JavaScript Core 来做桥接,将 JavaScript 调用转为 Native 调用。React Native 最终会生成对应的自定义原生控件。这种策略将框架本身和 App 开发者捆绑在系统的控件上,不仅框架本身需要处理大量平台相关的逻辑,随着系统版本变化和 API 的变化,开发者可能也需要处理不同平台间的差异,甚至有些特性只能在部分平台上实现,这使得跨平台特性大打折扣。

Flutter 是最新的跨平台开发技术,可以横跨 Android、iOS、MacOS、Windows、Linux 等多个系统,还可以打包成 Web 程序运行在浏览器上。Flutter 采用了更为彻底的跨平台方案,即自己实现了一套 UI 框架,然后直接在 GPU 上渲染 UI 页面。

笔者最早接触的跨平台技术是 Adobe Air,写一套 Action Script 代码可以运行在 PC、Android 及 iOS 三大平台上。

笔者与朋友开发视频会议产品,需要最大化地减少前端的开发及维护工作量,所以,我们先后考察过 Cordova、React Native 及 Flutter 等技术。最终经过全面的对比分析,我们觉得 Flutter 方案更加先进,效率更高。

Flutter 是什么?

Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。Flutter 可以与现有的代码一起工作。

在全世界,Flutter 正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

Flutter的特点如下所示:

1) 跨平台

现在 Flutter 至少可以跨 5 种平台,甚至支持嵌入式开发。我们常用的如 MacOS、Windows、Linux、Android、iOS,甚至可以在谷歌最新的操作系统 Fuchsia 上运行。

到目前为止,Flutter 算是支持平台最多的框架了,良好的跨平台性直接带来的好处就是减少开发成本。

2) 丝滑般的体验

使用 Flutter 内置的 Material Design 和 Cupertino 风格组件、丰富的 motion API、平滑而自然的滑动效果和平台感知,为用户带来全新体验。

3) 响应式框架

使用 Flutter 的响应式框架和一系列基础组件,可以轻松构建用户界面。使用功能强大且灵活的 API(针对 2D、动画、手势、效果等)能解决艰难的 UI 挑战。

4) 支持插件

通过 Flutter 的插件可以访问平台本地 API,如相机、蓝牙、WiFi 等。可借助现有的 Java、Swift、Objective-C、C++ 代码实现对原生系统的调用。

5) 60fps超高性能

Flutter 采用 GPU 渲染技术,所以性能极高。用 Flutter 编写的应用可以达到 60fps(每秒传输帧数),这意味着它完全可以胜任游戏的制作。

官方宣称用 Flutter 开发的应用的性能甚至会超过原生应用。

Flutter 的核心概念

Flutter 包括一个现代的响应式框架、一个 2D 渲染引擎、各种组件和开发工具。这些组件有助于快速地设计、构建、测试和调试应用程序。

Flutter 的核心概念有:组件、构建、状态、框架等,下面分别介绍。

Flutter 中一切皆为组件

组件(Widget)是 Flutter 应用程序用户界面的基本构建块。不仅按钮、输入框、卡片、列表这些内容可作为 Widget,甚至布局方式、动画处理都可视为 Widget,所以 Flutter 具有一致的统一对象模型:Widget。

Widget可以定义为:

  • 一个界面组件(如按钮或输入框)。
  • 一个文本样式(如字体或颜色)。
  • 一种布局(如填充或滚动)。
  • 一种动画处理(如缓动)。
  • 一种手势处理(GestureDetector)。

Widget 具有丰富的属性及方法,通过属性可改变组件的状态(颜色、大小等)及回调方法的处理(单击事件回调、手势事件回调等),方法主要是提供一些组件的功能扩展。比如 TextBox 是一个矩形的文本组件,其属性及方法如下:

  • bottom:底部间距属性。
  • direction:文本排列方向属性。
  • left:左侧间距属性。
  • right:右侧间距属性。
  • top:上部间距属性。
  • toRect:导出矩形方法。
  • toString:转换成字符串方法。

Flutter 组件嵌套

复杂的功能界面通常都是由一个一个功能简单的组件组装完成的。有的组件负责布局,有的负责定位,有的负责调整大小,有的负责渐变处理,等等。这种嵌套组合的方式带来的最大好处就是解耦。

例如,界面中添加了一个居中组件 Center,居中组件里嵌套了一个容器组件 Container,容器组件里嵌套了一个文本组件 Text 和一个装饰器 BoxDecoration。

演示代码如下所示:

return Center(
    // 添加容器
    child: Container(
        // 添加装饰器
        decoration: BoxDecoration( ),
        child: Text(
            // 添加文本组件
        ),
    ),
),

大家如果是首次看到这段代码,会觉得嵌套层次太多、太复杂。其实不然,随着对组件的深入了解及熟练使用,写起来还是非常得心应手的。

最基础的组件类是 Widget,其他所有的组件都是继承 Widget 的,如下图所示。紧接着下面有两大类组件:有状态组件及无状态组件。有状态组件是界面会发生变化的组件,如 Scrollable、Animatable 等,无状态的组件即界面不发生变化的组件,如 Text、AssetImage 等。

Flutter组件的层次结构

本文标题:Flutter是什么?

本文地址:https://www.hosteonscn.com/7553.html

评论

0条评论

发表评论

邮箱地址不会被公开。 必填项已用*标注