深入了解Flutter好在哪里？

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

这句话让你吃惊的地方可能有两个：首先，没有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是一款高质量的软件。只不过它是复杂的流水线中的一款复杂的工具。