Flutter —再次使跨平台开发出色

Flutter是Google所开发的新型,跨平台,开源,移动开发框架。 这意味着什么? 这意味着一个代码库可以全部统治。 无需深入研究Swift / Objective-C即可构建iOS应用并使用Kotlin / Java重新构建整个应用。

当然,谷歌并不是最先提出这个想法的天才。 还有许多其他类似的框架,例如Xamarin,Nativescript和React Native。

那么为什么要创建另一个框架? 有一种理论是,Google只想赶上潮流,快速破解东西来建立另一个框架错了 绝对不是快速拍摄,而是经过深思熟虑的创作。 为什么? 我很高兴你问…

(免责声明:本文中不会包含太多示例代码,因为这是对框架及其工作原理的介绍。代码示例用于以后的文章)


1.飞镖(不是运动)

首先是语言。 Flutter代码是用Dart编写的。 不仅是应用程序代码,而且包括(大部分)整个框架。 由于它是开源的,因此您可以在GitHub上查看所有代码。 大多数其他框架使用Web堆栈(JavaScript,Typescript,HTML,CSS等的某种组合),那么Google为什么选择Dart? 在他们宣布Kotlin为Android开发的新Java替代方案之后,这种选择似乎更加奇怪。

如果您从未听说过Dart,请不要担心,它主要在Google内部使用,甚至由他们开发。 在这里,您将拥有自己的第一个优势:由框架的创建者直接维护的语言可以紧密结合并针对性能进行优化。 “其他”大多数情况下依赖于更通用的语言,例如JavaScript,这不一定是一件坏事。 但是,由于它被用于许多不同的事物,因此它必须具有多种用途,从而难以对特定用例进行优化。

因此,如果您现在认为学习Dart仍需要付出很多努力,我想向您介绍Dart团队成员的一个(可能是非正式的)报价:

我希望它有更多的闪光点,但我不能否认在编写Dart代码的第一天,我的工作效率很高

我同意这一点。 如果您已经学习了Java或JavaScript之类的JVM语言,您将对Dart 非常熟悉。 它没有太多功能。 有一些有用的功能,例如单行功能,但它不仅功能强大:

对于尚未晕倒并惊off不已的所有人来说,这实际上可以改变整个开发过程 。 如果您可以如此快速地更改某些内容并查看结果,那么开发过程将变得更加迭代 。 起初我不敢相信,但这确实对我产生了影响。

这也使调试变得更加容易。 由于Dart VM及其状态可以在不使用特定IDE的情况下进行调试,因此可以自由选择。 实际上,Flutter多个受支持的IDE,包括Android Studio / IntelliJ IDEA甚至是Visual Studio Code(到目前为止,这一直是我的选择,并且很高兴与之合作)。 因此可以肯定地说工具也很棒

另一个很棒的事情是,它的伸缩性非常好。 如果您听过精彩的Fragmented Podcast情节(如果不是,我强烈建议您这样做-以及第2部分)。 Eugenio Marletti是全球Flutter的八位Google开发人员专家(GDE)之一,对此做得很漂亮。 这意味着只有您更改的代码才被推送并热加载,从而使其非常高效。

热重载与强大的工具支持相结合,可实现极快的开发周期和出色的调试

3.一切都是小部件-它们看起来很漂亮

您需要在Flutter中学习的最重要的课程之一是,一切都是小部件。 是的, 一切 ! 您想在屏幕上显示文字吗? 有一个小部件( Text )。 您要输入文字吗? 有一个小部件( TextField )。 到目前为止,到目前为止,这是大多数人可能从移动或网络中了解的内容。 但是,如何在屏幕上居中显示呢? 到现在为止,您可能已经掌握了它—有一个用于此的小部件( 中心 )。 起初这听起来真的很奇怪,因为它与其他框架中的实现方式完全不同。 但是一旦掌握了窍门,便可以通过小部件完全搭建屏幕了 。 要构建带有居中文本的小部件,这是完整的代码:

这是创建此小部件所需的全部代码。

另一有帮助的是您的布局实际上是在代码中定义的。 根据您的专业知识所在,您可能习惯于使用.xml文件 (Android), 情节提要 (iOS)或HTML和CSS的组合(web)。 Flutter会改变这种情况-您将所有东西都放在一个地方。 实际上,与热重装功能结合使用起来非常好,因为它可以使您的开发流程异常迅速。 您无需在多个文件之间切换 ,然后构建项目。 您可以逐个窗口小部件构建布局窗口小部件,只需保存文件并查看结果直接显示在应用程序中,就可以进行检查。

您可能会想到一个问题,那就是必须注意布局代码不会太乱。 Flutter通过继承不是继承的原则生活 这意味着最好不要创建从其他继承的新小部件,而应合并现有小部件以形成新的小部件。 这样,您可以通过将复杂的小部件组合提取为多个部分并将它们放在一起来简化布局。 这样可以保证更好的结构以及更好的代码可读性。

每个布局组件都是一个小部件,可以直观地逐步构建布局,并在代码中的一个位置定义了所有内容

4.表现很棒

跨平台框架的主要关注点一直是性能。 诸如Ionic或Cordova之类的较早框架大量使用了WebView。 此处的一般过程是,编写的JavaScript代码在移动平台的WebView中显示其内容。 当然,这限制了应用程序的功能,此外,还有一个JavaScript桥正在与诸如位置,照相机等系统服务通信。然后在WebView上具有一定的性能指标和总体限制。

React Native所做的是它不使用WebView在移动应用程序内部呈现内容。 它保持了JavaScript桥的作用,以管理JavaScript代码与相应平台之间的所有通信。 但是它使用它来访问系统上使用的本机组件。 这意味着,如果要在屏幕上显示文本,它将通过桥,然后创建UILabel (iOS)或TextView (Android)。 由于它重新使用了用户熟知的组件,因此使应用程序具有更自然的外观。 但是,JavaScript桥仍然存在,并且仍然必须管理布局以及与系统服务的通信。

Flutter则采取了不同的方式。 如前所述,他们使用Dart作为语言。 飞镖代码实际上是提前(AOT)预先编译为本机代码的 。 然后,它使用不同的层来构建您的UI。 最底层(您可能不想访问)实际上创建了一个画布并将整个布局绘制到画布上 。 这意味着它不使用上述UILabelsTextViews之类的系统组件。 它确实将您创建的窗口小部件绘制到屏幕上。 这意味着您可以使用本机应用程序的外观(它们具有Android的MaterialWidgets和iOS的CupertinoWidgets ),而无需JavaScript桥。 这消除了这种桥接器的潜在瓶颈,并提高了性能。

除了那些出色的编译器选项外, Flutter还提供了无需锁定即可进行对象分配和 垃圾回收的机制。 它还不使用抢占式调度和共享内存,因此可以更轻松地消除并发错误。 所有这些事情导致了他们对不断提高> 60fps的承诺。 通过这种动画和滚动,可以在生产模式下流畅地进行滚动 。 可以在这里找到一篇出色的文章,其中详细介绍了为什么Dart非常适合在移动设备以及甚至在网络上使用(真的很棒)。

Flutter的编译器选项提供了具有最佳调试特性的强大开发支持(JIT),并在生产环境中实现了真正的快速本机(AOT)性能。


因此,如果您继续阅读到这一点,希望我能向您展示为什么Flutter确实很酷。 它结合了来自其他不同方法的许多东西,并尝试优化使用一种代码库来统治所有代码的方式。 为了使这篇文章的长度保持可读性,我什至没有提到很多事情,例如:

  • 强大的社区支持(甚至还有一个小伙伴,您可以在其中直接与Flutter的人聊天,他们在那里很活跃)
  • 开箱即用的精美用户界面(请参见示例)
  • 如果需要,易于集成本机代码
  • 强大的测试支持

我以撰写本文为起点,希望深入研究Flutter应用程序的创建以及有关Flutter内部工作方式的更深入的说明。 因此,如果您喜欢阅读本文,请告诉我您以后的帖子希望涵盖的内容。 您可以在此处的评论中或通过Twitter @stefanjblos进行此操作。
(也非常感谢对此帖子提供反馈的人员,尤其是Marco和Nino)