Flutter 中的 Widget 是什么？

Question

Flutter 教程到处都使用“Widget”这个词。在这种情况下什么是小部件？我能在 SO 上找到的最接近的问题在这里：什么是 Android 中的小部件？

但它是关于 Android 而不是 Flutter（它为 Android 和 iOS 构建，因此在两种上下文中都定义了小部件）并且答案有点令人困惑。一个人说 Widget 就像一个按钮（所以我想到了一些 Ui 包/框架的 Ui 组件），另一个人说它就像一个应用程序，因为它可以在任何地方运行并占据整个屏幕。那么来自 WebDevelopment，我可以假设 Widget 类似于 WebComponent 吗？

它是一段独立的代码，不依赖于其他组件，但需要在环境中引导？这个假设是真的吗？安卓和iOS都可以吗？

Answer 1

小部件并不等同于 WebComponents。它们也不是 UI 元素。

小部件是用于描述应用程序任何部分的高级对象。它可以是但不限于按钮等 UI 元素；布局（对齐，填充，...）；数据（主题、配置）...

小部件可以是一切。在 flutter 中，几乎所有你要编写的代码都在一个 Widget 中。甚至像“redux reducers”这样的东西也是flutter中的小部件。

从某种意义上说，小部件与 React 组件极为相似。

最后，将小部件视为描述您的应用程序的东西。

但是什么小部件不是呢？

小部件不做任何计算。他们将该计算委托给其他对象。

例如，小部件无法在屏幕上呈现某些内容。相反，它RenderObject通过使用它的内部方法将其委托给createRenderObject。

仅供参考，在 Web 世界中，aRenderObject通常是 DOM 元素或您的 Web 组件（因为它们是自定义 DOM 元素）。

既然他们将所有东西都委托给其他对象，我真的需要他们吗？

你不需要它们。但你应该他们。您可以直接使用RenderObject. 您的应用程序很可能会更快。

但是小部件的设计方式使您的应用程序更具表现力、模块化和可维护性。

小部件通常在其他对象的顶部引入反应式/函数式编程模式。结合更好的 API 来使用这些较低级别的对象。

Answer 2

WebComponent的严格定义在任何地方都略有不同，但基本上它归结为（用我自己的话来说）“一组标准，允许以 html 标签的形式定义自定义、封装、可重用元素”。

Flutter对 widget的严格定义是：

描述元素的配置

和元素被定义为：

在树中特定位置的 Widget 实例

然而，当您谈到 WebComponents 时，您可能会想到“自定义的、封装的、可重用的元素”而不是严格的定义。

当您开始以这种方式考虑它们时，flutter 的 Widget 变得非常相似。当您定义小部件时（通过扩展小部件类之一），您可以允许某些输入，并定义它的显示方式。您可以或多或少地使用小部件，而无需知道它的内部工作原理，只要您知道已为其提供的“界面”。当你实例化它时，你会创建一个 Flutter 选择调用 Element 的小部件实例。Widget 听起来与 WebComponent 元素非常相似！

此外，当您Widget在 Flutter 中创建 a时，您可以封装其他小部件，这样您就不必从头开始编写可视化定义（Flutter 使用 RenderObject 来表示渲染，而 WebComponents 模拟将编写没有其他元素的纯 html5）。Flutter 包括许多小部件，例如按钮、列表、容器、网格等，它们与您在各种 WebComponent 库（例如 Polymer 的铁组件）中找到的相似。

Flutter 对 Widget 的定义有一些额外的皱纹 - 它们有各种类型，包括InheritedWidget, StatefulWidget, StatelessWidget（以及一些更专业的），每种类型都有自己的用法；在某些方面，Flutter 的组件实际上比 WebComponents 更接近于 React 的组件（实际上 Flutter 的设计基于相同的反应式理想）。这种“反应性”是 flutter Widget 和 WebComponent 元素之间的最大区别——它们主要通过将状态向下传递到树来工作，而 WebComponent 元素更有可能具有您的小部件可以在其子元素上调用的方法，并且更改是通过定义小部件的方式沿树向下传播，而不必调用函数。

不是每个 flutter Widget 都必须有一个可视化定义（也不是所有的 WebComponents 都有一个可视化定义）。例如，InheritedWidget 基本上用于在小部件树中向下跳跃状态，而无需实际将信息向下传递到每一层 - 它用于在整个应用程序中共享 ThemeData。并且没有过多涉及血腥的细节，flutter 被优化用于在事情发生变化时主要构建不可变的小部件，而不是重新使用和修改现有的小部件。

不过，这个 TLDR 是，是的，flutter 中的小部件类似于 WebComponent 元素，但有一些警告。您将主要以一组小部件的形式编写应用程序，其中一些小部件封装了其他小部件。Flutter 的工作方式是它使用自己的跨平台渲染器 (Skia)，该渲染器位于 android 或 iOS 的相应视觉容器中（Activity，我相信 UIView (controller?)） - 所以你永远不会从 Activity 切换到 Activity或 UIViewController 到 UIViewController 在原生 android/iOS 端。