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 组件极为相似。

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

---

但是什么小部件不是呢？

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

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

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

---

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

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

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

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

Answer 2

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

Flutter对 widget的严格定义是：

描述元素的配置

元素定义为：

在树中特定位置的 Widget 实例

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

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

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

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

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

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

Answer 3

看起来 flutter 有一些关于这个的文档： flutter docs

本质上，小部件似乎是一种描述元素配置的方式。 Elements 上的文档又回到了小部件的概念。

粗略一看，对我来说，元素似乎是一般视图的同义词。 似乎它正在使用网络术语。

Answer 4

Widgets 基本上是 Flutter 中的 UI 组件，用 Dart 语言编写

Answer 5

如前所述，Flutter 强调小部件作为一个组合单元。 小部件是 Flutter 应用程序用户界面的构建块，每个小部件都是用户界面一部分的不可变声明。

小部件根据组合形成层次结构。 每个小部件都嵌套在其父级中，并且可以从父级接收上下文。 这个结构一直到根小部件（承载 Flutter 应用程序的容器，通常是MaterialApp或CupertinoApp ），如这个简单的例子所示：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('My Home Page')),
        body: Center(
          child: Builder(
            builder: (BuildContext context) {
              return Column(
                children: [
                  Text('Hello World'),
                  SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {
                      print('Click!');
                    },
                    child: Text('A button'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

在前面的代码中，所有实例化的类都是小部件。

应用程序通过告诉框架用另一个小部件替换层次结构中的小部件来响应事件（例如用户交互）更新其用户界面。 然后框架会比较新旧小部件，并有效地更新用户界面。

扑有它自己的每个UI控制的实现，而不是延迟到由该系统提供的那些：例如，有一个纯Dart implementation两者的iOS Switch control和one for所述Android equivalent 。

这种方法提供了几个好处：

• 提供无限的可扩展性。 需要 Switch 控件变体的开发人员可以以任意方式创建一个变体，而不受操作系统提供的扩展点的限制。
• 通过允许 Flutter 一次合成整个场景，而无需在 Flutter 代码和平台代码之间来回转换，避免了显着的性能瓶颈。
• 将应用程序行为与任何操作系统依赖项分离。 该应用程序在所有版本的操作系统上的外观和感觉都相同，即使操作系统更改了其控件的实现。

有关更多信息，请参见： https : //flutter.dev/docs/resources/architectural-overview#widgets