深入了解Flutter好在哪里?

开课吧开课吧锤锤2021-06-03 10:06

点赞
有用
分享分享

    即便你听说过Flutter,可能也是在移动应用开发的语境下。究竟如何将Flutter应用到Web开发呢?对于普通的HTML网页,你可以将页面作为文档来处理。但在Flutter中,“页面”(或用户与之交互的内容)实际上是绘制到HTML画布上的。Flutter控制着绘制到屏幕上的每一个像素,而且它不使用HTML、JavaScript或CSS来定义外观或逻辑。(从技术的角度来看,原生Dart代码通过dart2js转换成了JavaScript,但业务逻辑实际上并不是用JavaScript编写的。)

web

    这句话让你吃惊的地方可能有两个:首先,没有HTML;其次,所有的内容都是绘制到画布上的。我能理解,这话听起来有点奇怪,至少直接绘制到画布上的性能可不好。下面,让我们进一步研究一下。

    绘制到画布而不是文档

    首先,我们不使用HTML编写网页,也不会将内容写入文档。初听之下,感觉很奇怪。但是,使用HTML开发网页时,你究竟做了哪些工作?我们在前面就讨论过了,你创建的文档对于用户设备的窗口来说太大了,你需要滚动。你正在阅读的这篇文章,页面的高度就超过了窗口大小,你需要不断向上滚动。

    仔细想一想,我们设计的用户界面超过了窗口的纵向大小,用户必须滚动页面才能浏览全部内容,这不是很奇怪吗?如果你希望用户从左到右(不是从上到下)滚动窗口,该怎么办?恐怕在普通网页上可不容易实现。

    在Flutter中,如果想让某一部分内容水平滚动,就只需要将小部件包装到SingleChildScrollView。你也可以指定滚动条的方向,无论滚动条是在垂直方向还是水平方向上滚动。

    因为Flutter的基本概念是,在单独的小部件中绘制文档,而不是将文档绘制到屏幕上,所以开发人员完全可以控制如何布局应用程序。

    只使用一种语言

    如前所述,为了创建一个出色的网站,你必须掌握HTML、JavaScript和CSS。这也意味着,你所需的知识无法在这些语言之间融会贯通,例如,你不能在HTML中使用任何JavaScript的知识。HTML纯粹是标记语言,CSS纯粹是样式语法,而JavaScript纯粹是编程语言。这些语言都不包含类型检查等功能,所以虽然CSS看似很完整,但在用户使用页面的时候,就会悄无声息地出问题。

    Flutter采用了Dart语言,并使用Dart编写了应用程序的所有外观和业务逻辑。Dart具有静态类型检查,而且即将推出null安全性,因此应用程序中的每一行代码,无论是描述应用的外观,提供样式,还是控制业务逻辑,都是类型安全的。

    轻松布局

    一般来说,网站显示的数据来自其他源头:无论是数据库、API还是其他来源,我们都希望数据能够按照预期显示出来。想象一下,我们有一组从API返回的对象,而你使用了Angular的对象来显示它们。通常,你需要将这些对象加载到支持组件中,然后使用*ngFor迭代所有对象。你需要添加div。但是,这些没有样式的div看起来会过于苍白。如果你希望列表中的各项显示在列或行中,则必须使用CSS或flexbox来实现。

    而在Flutter中,你可以使用Column或Row来布局这些数据,Column或Row的children属性可以接受对象数组。仔细想一想,在大多数情况下,你可能会希望对象列显示成一排或一列。在Flutter的帮助下,你可以快速完成视觉上的布局,然后再为列表中的各项设置样式。根据我的经验,你可以更快地完成脚手架和原型制作,同时不影响最终结果。

    控制窗口中的每个像素

    由于Flutter会将每个像素渲染到屏幕上,因此设计人员和开发人员可以完整地控制自己想要的应用或体验。渲染屏幕上的每个像素听起来会造成巨大的性能损失,但请不要误会我的意思,这种做法当然不如渲染HTML的速度快,但是在GPU的加速下,性能也得到了提升。根据传统的做法,设计HTML的网页意味着,你必须考虑不同的浏览器。然而,在Flutter中,给Text小部件设置的字体无论在何处显示,最后的效果都一样,因为Flutter可以控制每个像素的外观。

    再见,Webpack!

    由于Flutter使用了Dart,因此在针对目标平台编译Flutter应用时,它会把所有相关的软件包(也是用Dart编写的)都转换成JavaScript。Dart是一种类型安全的语言,不支持反射,因此编译器可以更好地了解应用需要调用什么以及不需要调用什么。这有助于我们进一步将应用的规模降到最小。在Web上构建Flutter应用不需要使用Webpack,因为它不需要Webpack,这是Flutter本身的一大优势(至少在我看来是优势)。并不是说Webpack有问题,Webpack是一款高质量的软件。只不过它是复杂的流水线中的一款复杂的工具。

web

    以上就是小编为大家整理的“深入了解Flutter好在哪里?”一文,更多Web教程尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享