发布时间:2018-10-30责任编辑:满帅 浏览:1741
在Gogle I/O’17 开发者大会上,谷歌向我们介绍了一款新的,用来创建移动应用的开源库—Flutter。
各位可能有所了解,Flutter是一种拥有着优美用户界面的跨平台解决方案。Flutter在设计界面方面跟网页应用差不多,所以你能找到很多跟HTML/CSS的相同点。
据他们所说,
Flutter让构建漂亮的移动应用变得多快好省。
听起来还行哈,但第一眼看上去,咱不是非常需要这玩意儿的样子。在Flutter还没发明出来的时候,咱有Xamarin啊,PhoneGap啊,Ionic啊,React Native啊什么的各种工具。咱有这么多种选择,而且对这些工具的优缺点,不同的人有不同的见解,所以我不是很确定,Flutter跟前者到底有什么区别。不过当我用上这玩意儿的时候,您别说,还真挺好用。
Flutter有很多来自安卓开发者的有趣特性。在这篇文章中,我将向你们展示打动我的地方。3,2,1,Go!
你可能像个萌新一样好奇,可能想问天,想问地,想问问你自己:
“这玩意儿有啥创新的地儿么?这玩意儿咋工作的?这玩意儿跟React Native有啥不同?“
我不想在这儿讨论这种技术性问题(不要打我,原文就是这么写的),其他的哥们弄的比我好多了。如果你对Flutter到底咋运行的详细情况感兴趣,推荐你读读这篇文章:What’s Revolutionary about Flutter? 在这篇文章:“The Magic of Flutter” presentation 中,你能找到相关概念的简介。
简单来说吧,Flutter就是一个用来创建混合移动应用的移动SDK(所以你可以一次编写,到处运行,Android啊IOS啊都不在话下)。这玩意儿用的是一门叫Dart的语言。好吧恕我孤陋寡闻了,前几年听都没听过2333。它长得还挺像JAVA的,也是谷歌的产品。当然,你不必再写XML文件,而是像下面所示那样构建布局树:
如上所示,一个布局由嵌套的组件(部件)构成。核心部件就是MaterialApp(这个APP的整体),接下来就是Scaffold(主布局结构),再里边儿就是AppBar(像安卓的工具栏似的),还有一些像body一样的容器,在这里边就可以放入Text(文本)啊,Button(按钮啊)什么的。
当然,这只是截取了一小点儿,如果您还想了解更多的布局类的话,可以在这里找到: Flutter’s tutorial on building layouts.
废话不多说了,老铁们,现在就开始了!
先从最基础的App开始讲起。现在有三个按钮,每一个按钮都可以改变文本的颜色:
现在,让我们体验最狂拽炫酷的功能—热重载。这个功能允许各位像编写一个页面一样,实时的重新构建你的项目。来看看下面我为你们准备的截图,体验一下啥叫热重载。
在这儿我干了些啥呢?可能有机灵的哥们已经看出来了,我在代码中改了些逻辑,像修改按钮上的文本啊,这类的,然后单击“热重载”按钮(在Intellij IDE 的顶端,VSCODE可直接Ctrl+S保存,自动刷新),然后几秒后它就自动刷新了。非常炫酷,有木有!
热加载有诸多好处,又快又好使—如果你在界面上已经显示了很多数据,像在上面例子中的文字颜色,你可以在App运行期间修改UI,如果你使用了热重载功能,没有变化的部分还是保持原样。
另一个非常爽的地方就是Flutter有一个非常健全的内置UI组件库。有两种大类型—安卓上的 Material Design 和IOS上的 Cupertino 。想要啥都可以通过继承来实现。是否跃跃欲试想自己弄一个浮动的动作按钮呢?跟随一下步骤走起:
最牛的事儿就是,你能实现每个平台的每个部件。如果你实现了Material Design或Cupertino下的部件,在安卓系统和苹果系统中,它们的表现将会保持一致。妈妈再也不同担心我写的代码在不同平台像是两个不同的App啦。
从前面展示的图中也能看出来,创建UI不要太简单。这就不得不提到Flutter的核心原理,万物皆部件。你的App类是一个部件(MaterialApp),你的整个布局是一个部件(Scaffold),基本所有东西都是部件(AppBar, Drawer,SnackBar)。想要让视图居中?仅需要把它包进一个Center部件即可!
这样以来,创建UI就像是把各部分的一个个小部件像搭积木一样拼接起来。
这就又联系到Flutter的另一个核心原理:组合大于继承。意思就是,如果你想要创建一个新的部件的时候,不要用那套继承组件类的老方案,而是用更细粒度的小部件组合起来。
有的时候吧,咱想让安卓和苹果上的同一个App看起来不太一样。不只是颜色不一样,还想让部件的尺寸啊,样式啊都不一样。Flutter通过themes(主题)选项同样可以办到:
如图所示,我们给工具栏(AppBar)设置了不同的颜色和视图。我们通过Theme.of(context).platform
来拿到当前所处的运行平台:
尽管Flutter尚在Alpha阶段,它的社区已经非常庞大了。多亏了各位大牛们,Flutter有了很多工具包的支持,像安卓上的Gradle依赖啊之类的。现在已有了打开图片啊,发起HTTP请求啊,分享内容啊,存储个人设置啊,调用传感器啊,实现Firebase基类啊什么的。以上这些都支持安卓和苹果双平台。
如果感觉这玩意儿还不错,想要亲自试验一下,最好的办法就是通过Google 代码实验室(需要科学上网工具):
· 在这个网址你可以学到创建布局的基础知识: Building Beautiful UIs with Flutter
· 如果觉得这些还不够,强烈推荐Firebase for Flutter
在Google代码实验室学完基础的后,你可以弄一个简单好看的聊天软件试试。也可以参考我GitHub上的这个小玩意儿:
· https://github.com/pszklarska/HelloFlutter
在这里你可以看到实际完成,已经上架的应用:
· https://play.google.com/store/apps/details?id=io.flutter.gallery
项目开发组 供稿