我喜欢 Google Flutter
在 google i/o ’17 上,google 向我们介绍了 flutter —— 一款新的用于创建移动应用的开源库。
正如你所想的那样,flutter 是能够帮助创建拥有漂亮 ui 界面的跨平台移动应用解决方案。flutter 的界面设计与 web 应用类似,因此,你能够从 flutter 上找到像使用 html/css 那样熟悉的感觉。
google 表示:
flutter 将会帮你更容易,更快速的开发出界面美观的移动应用。
听起来很美好,但是首先要说的是,我对其他跨平台解决方案,诸如 xamarin,phonegap,ionic,react native 等并不是很认可。 大家都知道,这些解决方案互有利弊,很难选择。虽然我并不确定 flutter 是否会与它们有所不同,但是我很期待。
为什么要用 flutter ?
你可能会好奇,然后问自己一个问题:
flutter 有什么创新之处?它是如何工作的?与 react native 有什么不同之处?
我不会在这里讨论技术问题,因为其他人做得更好。如果你对 flutter 的工作细节感兴趣,我建议你读读这篇文章:flutter 的革命性创新是什么?你也可以在“ the magic of flutter ”演示中查看 flutter 概念的总结。
简要来说,flutter 是一个移动 sdk ,允许我们创建混合移动应用(这样你就可以编写一份代码,在 android 和 ios 都可以运行这个应用程序)。你在 dart 中编写代码,这是一种由谷歌开发的语言,如果你以前用过 java ,那看它会觉得非常熟悉。你不再需要用 xml 文件构建布局树,而是像这样:
import 'package:flutter/material.dart'; class helloflutter extends statelesswidget { @override widget build(buildcontext context) { return new materialapp( title: "helloflutter", home: new scaffold( appbar: new appbar( title: new text("helloflutter"), ), body: new container( child: new raisedbutton(onpressed: _handleonpressed), ), ), ); } }
正如你所看到的,布局是由嵌套的组件(小部件)构建的。核心部件是 materialapp(这是整个应用程序),然后我们有了 scaffold (这是主要的布局结构),然后在里面我们有 appbar(像 android 工具栏)和一些容器作为主体。在内部,我们将放置布局小部件 —— 文本、按钮等。
#1 热重载
好的,现在就开始吧!
我们从一个基本的应用开始。我们有三个按钮,它们中的每一个都能改变文本的颜色:
现在,我们将会使用其中一个最酷的特性——热重载。它能让你的网页做到立即重建。看看效果:
回顾下我们具体做了什么?我们变更了一些代码(在按钮上的文本),当我们点击“热重载”(在 intellij ide 的顶部)并且我们能在短时间内就看到结果。是不是很酷炫?
热重载不仅仅快还智能——如果你有一些数据已经被显示(比如说,这个例子中的文本颜色),你可以在应用运行期间使用热重载改变 ui :内容还是一样的。
#2 全套小部件 (material design)
flutter 的另一个优点是,我们有一个非常丰富的内置 ui 组件的目录。里面有两套小部件—— material design(针对 android )和 cupertino(适用于 ios )。你可以选择并轻松实现你想要的任何东西。比如说如果想要创建一个新的浮动动作按钮,则可以像下面这样:
更棒的是,你可以在各个平台上实现任意的小部件。而且如果你已经实现了一些 material design 或 cupertino 小部件,那么它在每个 android 和 ios 设备上都是一样的。你不需要担心在众多设备上看起来会有什么不同。
#3 所有东西都是一个小部件
正如你在之前的 gif 中所看到的,创建 ui 非常简单。这得感谢 flutter 的核心原则 —— 所有东西都是一个小部件。你的 app 类是一个小部件(materialapp),你的整体布局结构也是一个小部件(scaffold),所有东西都是一个小部件(appbar, drawer, snackbar)。想让视图居中?用 center 就好(cmd/ctrl+enter)!
有了 fluter,创建 ui 就像用许多不同的小部件组合布局一样简单。
flutter 还有另外一个核心原则,组合优先于继承。这意味着,如果你想要创建一些新的部件(widget),则可以使用几个 widget 组成新的 widget ,而不是扩展现有的 widget 类。
#4 android / ios 差异化主题
通常,我们希望我们的 android 应用与 ios 应用不同,不仅在颜色上,而且在小部件的尺寸和样式上也有差异。在 flutter 中可以用主题来实现这个目标:
正如你所看到的,我们为工具栏(appbar)设置了不同的颜色和高度。我们使用的是 theme.of(context).platform 参数来适配当前平台(android/ios):
import 'package:flutter/material.dart'; class helloflutter extends statelesswidget { @override widget build(buildcontext context) { return new materialapp( title: "helloflutter", theme: new themedata( primarycolor: theme.of(context).platform == targetplatform.ios ? colors.grey[100] : colors.blue), home: new scaffold( appbar: new appbar( elevation: theme.of(context).platform == targetplatform.ios ? 0.0 : 4.0, title: new text( "helloflutter", ), ), body: new center(child: new text("hello flutter!")), )); } }
#5 非常、非常、非常多的资源
虽然 flutter 依然在 alpha 版,但 flutter 的开发社区非常庞大而且参与度很高。正因如此 flutter 才有了很多资源的支持(类库的形式,就像 android 中的 gradle 依赖包)。我们有很多诸如开源图形、http 请求、内容分享、存储参数、访问传感器、部署 firebase 等等多种多样的类库。当然,每个资源包都支持 android 和 ios 。flutter库列表 - flutter awesome
如何开始呢?
如果你喜欢 flutter ,想自己尝试一下,最好的办法就是打开 google codelabs :
-
在这个网站中,你将了解创建布局的基础:用 flutter 构建漂亮的 ui
-
如果想尝试更多的话,你可以试试 flutter 的 firebase