以终为始,开启征程! 在GoogleIO’17上,Google向我们介绍了Flutter一款新的用于创建移动应用的开源库。 正如你所想的那样,Flutter是能够帮助创建拥有漂亮UI界面的跨平台移动应用解决方案。Flutter的界面设计与web应用类似,因此,你能够从Flutter上找到像使用HTMLCSS那样熟悉的感觉。 Google表示:Flutter将会帮你更容易,更快速的开发出界面美观的移动应用。 听起来很美好,但是首先要说的是,我对其他跨平台解决方案,诸如Xamarin,PhoneGap,Cordova,ReactNative,weex,ionic等并不是很认可。大家都知道,这些解决方案互有利弊,很难选择。虽然我并不确定Flutter是否会与它们有所不同,但是我很期待。 Flutter在移动前端开发上具有很多特色,很有吸引力。这篇文章,我将会告诉大家我之所以喜欢Flutter的真正原因,我们现在就开始吧! 为什么要用Flutter? 你可能会好奇,然后问自己一个问题: Flutter有什么创新之处?它是如何工作的?与ReactNative有什么不同之处? 简要来说,Flutter是一个移动SDK,允许我们创建跨平台移动应用(这样你就可以编写一份代码,在Android和iOS都可以运行这个应用程序)。你使用dart语言编写代码,这是一种由谷歌开发的语言,如果你以前用过Java,那看它会觉得非常熟悉。你不再需要用XML文件构建布局树,而是像这样: 正如你所看到的,布局是由嵌套的组件(小部件)构建的。核心部件是MaterialApp(这是整个应用程序),然后我们有了Scaffold(这是主要的布局结构),然后在里面我们有AppBar(像Android工具栏)和一些容器作为主体。在内部,我们将放置布局小部件文本、按钮等。 好的,现在就开始吧! 1、热重载 我们从一个基本的应用开始。我们有三个按钮,它们中的每一个都能改变文本的颜色: 现在,我们将会使用其中一个最酷的特性热重载。它能让你的网页做到立即重建。看看效果: 回顾下我们具体做了什么?我们变更了一些代码(在按钮上的文本),当我们点击热重载(在IntelliJIDE的顶部)并且我们能在极短时间内(毫秒级)就看到结果。是不是很酷炫? 热重载不仅仅快还智能如果你有一些数据已经被显示(比如说,这个例子中的文本颜色),你可以在应用运行期间使用热重载改变UI:内容还是一样的。 2、全套小部件(MaterialDesign) Flutter的另一个优点是,我们有一个非常丰富的内置UI组件的目录。里面有两套小部件MaterialDesign(针对Android)和Cupertino(适用于iOS)。你可以选择并轻松实现你想要的任何东西。比如说如果想要创建一个新的浮动动作按钮,则可以像下面这样: 更棒的是,你可以在各个平台上实现任意的小部件。而且如果你已经实现了一些MaterialDesign或Cupertino小部件,那么它在每个Android和iOS设备上都是一样的。你不需要担心在众多设备上看起来会有什么不同。 3、所有东西都是一个小部件 正如你在之前的gif中所看到的,创建UI非常简单。这得感谢Flutter的核心原则所有东西都是一个小部件。你的app类是一个小部件(MaterialApp),你的整体布局结构也是一个小部件(Scaffold),所有东西都是一个小部件(AppBar,Drawer,SnackBar)。想让视图居中?用Center就好(cmdctrlEnter)! 有了Fluter,创建UI就像用许多不同的小部件组合布局一样简单。 Flutter还有另外一个核心原则,组合优先于继承。这意味着,如果你想要创建一些新的部件(widget),则可以使用几个Widget组成新的Widget,而不是扩展现有的Widget类。 4、AndroidiOS差异化主题 通常,我们希望我们的Android应用与iOS应用不同,不仅在颜色上,而且在小部件的尺寸和样式上也有差异。在Flutter中可以用主题来实现这个目标: 正如你所看到的,我们为工具栏(AppBar)设置了不同的颜色和高度。我们使用的是Theme。of(Context)。platform参数来适配当前平台(androidios):importpackage:fluttermaterial。dart; classHelloFlutterextendsStatelessWidget{ override Widgetbuild(BuildContextcontext){ returnnewMaterialApp( title:HelloFlutter, theme:newThemeData( primaryColor: Theme。of(context)。platformTargetPlatform。iOS ?Colors。grey〔100〕 :Colors。blue), home:newScaffold( appBar:newAppBar( elevation: Theme。of(context)。platformTargetPlatform。iOS ?0。0 :4。0, title:newText(HelloFlutter), ), body:newCenter(child:newText(HelloFlutter!)), )); } } 5、非常、非常、非常多的资源 虽然Flutter是一个全新的移动UI框架,但因为Google的推动,Flutter的开发社区非常庞大而且参与度很高。正因如此Flutter才有了很多资源的支持(类库的形式,就像Android中的Gradle依赖包)。我们有很多诸如开源图形、HTTP请求、内容分享、存储参数、访问传感器、部署Firebase等等多种多样的类库。当然,每个资源包都支持Android和iOS。 如何开始呢? 如果你喜欢Flutter,想自己尝试一下!以下的信息要认真查阅了~ 由中睿信息技术有限公司艾彪老师主讲的课程(Flutter跨平台移动开发高级技术与实战),全面剖析Flutter技术从开发语言dart语法精要到Flutter技术应用实践。 仅需要5天,您即可获得如下收益: 1。Dart语言实战技能; 2。Flutter优势具体体现; 3。Flutter跨平台移动开发各种技术; 4。Flutter项目性能优化; 5。Flutter项目实战技能; 报名对象 1。掌握一门以上高级编程语言的技术人员; 2。管理工作中涉及到移动开发的人员; 3。希望提升自身职业能力的人员、其他对移动开发感兴趣的人员。