为什么访问 Flutter 小部件中的 MediaQuery 属性只会在访问它的小部件而不是其父部件中触发重建？

Question

我正在开发一个 Flutter 项目，我正在访问

MediaQuery

属性（例如，小部件内的

MediaQuery.viewInsetsOf(context).bottom)

，我们称之为 Widget2。

Widget2 是 Widget1 的子级，我注意到每当

MediaQuery.viewInsetsOf(context).bottom

的值发生变化时（例如当键盘显示或隐藏时），它都会触发 Widget2 的构建方法，但不会触发其父级 Widget1。换句话说，当属性值更改时，只有 Widget2 会重建，而不是树中位于其上方的小部件。

我的问题：

• 当

  MediaQuery

  属性发生变化时，Flutter 如何识别要重建哪个 widget？

• 为什么只有直接访问

  MediaQuery

  值的小部件才会重建，而不是其父级或祖先小部件？

好奇这在幕后是如何工作的。任何有关 Flutter 在这种情况下如何优化重建过程的见解都会很有帮助！

附加信息：

• 颤振版本：3.24.3
• 示例代码：

class Widget1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Widget2();
  }
}

class Widget2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double bottomPadding = MediaQuery.viewInsetsOf(context).bottom;
    return Container(
      padding: EdgeInsets.only(bottom: bottomPadding),
      child: Text("Hello World"),
    );
  }
}

Answer 1

Flutter 重建 widget 的方法采用了这种形式，即在主体内，依赖于对“MediaQuery”的观察或敏感度的 widget 是唯一的 widget。让我们看看详细情况如何。

依赖性跟踪：

当一个小部件需要 MediaQuery 的某个属性时（例如在 Widget2 中，MediaQuery.viewInsetsOf(context).bottom），Flutter 会将其记录为特定子小部件需要根据其视图配置构建的 MediaQuery 依赖项。 MediaQuery widget（包装了应用程序）提供了有关当前媒体状态的信息，例如屏幕大小、方向、填充等。因此，由于 Widget2 直接利用了这组信息，因此每次与 MediaQuery 相关的数据发生变化时，Flutter 都会排队用于重建的 Widget2。

特定于小部件的重建：

Flutter 优化了重建 widget 的过程。当它们被更改时，涉及重建的系统仅涉及直接依赖于与那些被更改的小部件密切相关的具体固有视图的视图。对于您来说，由于 Widget2 是唯一依赖于 MediaQuery.viewInsetsOf(context).bottom 值的小部件，因此它是唯一重建的小部件。 Widget1 不访问或依赖 MediaQuery 成员，因此不会重建。

高效渲染：

这是Flutter渲染系统的一部分。换句话说，不必要的小部件重建受到限制。不是通过小部件树传播，而是仅以任何方式更改小部件树中需要更改的部分。由于 Widget1 不需要知道底部插图，因此它保持不变