谷歌的跨平台移动 UI 框架 Flutter 开始 Beta 测试

  • Sergio De Simone
  • 谢丽

2018 年 3 月 12 日

话题：开源移动GoogleAndroidiOS语言 & 开发

看新闻很累？看技术新闻更累？试试下载 InfoQ 手机客户端，每天上下班路上听新闻，有趣还有料！

Flutter现在开始 Beta 测试。谷歌创建这个框架是希望为 iOS 和 Anroid 应用提供跨平台的界面，虽然不是标准的，但看上像原生的。

和React Native类似，Flutter 支持反应式风格的 UI 定义方法。它与其他跨平台 Web 视图框架的区别是，它基于Dart，这样就不需要 JavaScript 来连接 UI 和 OS 平台提供的原生服务，如位置服务、传感器访问、相机等等。借助提前编译成原生代码的 Dart，Flutter 节省了使用 JavaScript 桥接时的上下文切换开销。

旨在提供原生 UI 外观的跨平台框架使用原生实现的小部件来描绘按钮、表格等。通常，这还需要 App 的不同部分使用 JavaScript 桥接来通信，导致速度变慢。为了避免这个问题，Flutter 提供了自己的小部件集合，直接在 OS 平台提供的画布上描绘这类控件。这种方法的另外一个好处和 Dart 的 UI 布局机制有关。Android Layouts或iOS Constraints都旨在提供抽象概念描述在屏幕上布局 UI 元素的任何可能的方法，和这些 CSS 盒子模型不同，每个 Flutter 小部件都有自己的简单布局模型。具体来讲，如果要让一个小部件居中，则可以把它放到一个Center小部件里。类似地，如果要在其四周留有边距，则可以把它放在一个Padding小部件里。下面是一个简单的例子，一个 Center 小部件中包含一个文本和一个图标，两者垂直排列：

new Center(
  child: new Column(
    children: [
      new Text('Hello, World!')),
      new Icon(Icons.star, color: Colors.green)
    ]
  )
)

在 Flutter 中，所有的主题和导航都表示为小部件，因此，你可以改变 UI 的外观或者使用不同的父部件浏览不同视图的方式。

从 Flutter 进入 Alpha 阶段开始，谷歌就一直致力于更好的工具集成、Android Studio 和 Visual Studio Code 支持、更好的平台互操作性、更好的热重载以及一个针对部件树的部件查看器。

由于 Flutter 使用了 Dart，所以可以促进其应用的一个关键因素是，可用的第三方程序包让开发人员可以重用代码，而不必什么东西都从头开始编码。这包括类似发送网络请求、导航处理这样的东西，以及使用 Firebase、SQLite、Facebook Connect 等外部 SDK。感兴趣的读者可以查看 Flutter 上可用的程序包目录，其中包括 1000 多个程序包，看看其中是否包含自己需要的一切。

谷歌表示，在向 1.0 迈进的过程中，他们的重点是稳定性和支持更多的场景，例如，让 Flutter 更容易嵌入到已有的 App 中，使用内联 WebViews，等等。

如果想试用 Flutter beta，只要按照安装说明来操作即可。此外，务必看一眼Flutter Gallery、Posse Gallery和这些有用的链接。

查看英文原文：Google’s Cross-Platform Mobile UI Framework Flutter Now in Beta

开源移动GoogleAndroidiOS语言 & 开发