DevTools

随着 Flutter 应用日益复杂，理解各个 widget 属性如何影响 UI 变得越来越重要。 Dart 和 Flutter DevTools 为你提供了两个特别实用的功能： widget 检查器 和 属性编辑器。

首先，在应用以调试模式运行时，通过运行以下命令启动 DevTools。请在 与应用运行位置不同的终端窗口 中运行此命令：

$ dart devtools

运行此命令会启动 DevTools 服务器，并在浏览器中打开界面。

要将 DevTools 连接到你正在运行的应用：

1. 在运行应用的终端中找到打印的 DevTools URL （例如：Serving DevTools at http://127.0.0.1:9101）。

2. 复制此 URL。

3. 将其粘贴到 DevTools 浏览器页面的连接栏中。

widget 检查器让你可视化和探索 widget 树。它帮助你理解 UI 的布局，并识别哪些 widget 负责屏幕的不同部分。针对你目前构建的应用运行后，检查器如下所示：

考虑你在本节中创建的 GamePage widget：

class GamePage extends StatelessWidget {
  GamePage({super.key});
​
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        spacing: 5.0,
        children: [
          for (var guess in _game.guesses)
            Row(
              spacing: 5.0,
              children: [
                for (var letter in guess) Tile(letter.char, letter.type)
              ]
            ),
        ],
      ),
    );
  }
}

以及它在 MainApp 中的用法：

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: GamePage()),
      ),
    );
  }
}

在 widget 检查器中，你应该能看到与代码中完全相同的 widget 树：以 MaterialApp 为根，以 Scaffold 作为其 home，以 AppBar 作为其 appBar，以此类推，一直到带有 Tile 子级的 Row widget。你可以在树中选择任意 widget 以查看其属性，甚至跳转到 IDE 中的对应源代码。

widget 检查器或许在调试布局问题时最为实用。

在某些情况下， widget 的 约束 是无界的，即无限的。这意味着最大宽度或最大高度被设置为 double.infinity。当给定无界约束时，试图尽可能大的 widget 无法正常工作，并且在调试模式下会抛出异常。

渲染 box 最终获得无界约束的最常见情况出现在 flex box widget（Row 或 Column）内，以及可滚动区域内，例如 ListView 或 ScrollView 子类。

例如，ListView 会尝试扩展以适应其交叉方向上的可用空间。比如它是一个垂直滚动的块，试图与其父级一样宽。如果你将垂直滚动的 ListView 嵌套在水平滚动的 ListView 内，内部列表会尝试尽可能宽，而由于外部列表在该方向上可滚动，因此宽度是无限的。

或许你在构建 Flutter 应用时最常遇到的错误是由于不正确地使用布局 widget。此错误被称为「无界约束」错误。

观看以下视频，了解如何发现并解决此问题。

Watch on YouTube in a new tab: "Decoding Flutter: Unbounded height and width"

当你在 widget 检查器中选择一个 widget 时，属性编辑器会显示该所选 widget 的所有属性。这是一个强大的工具，用于理解 widget 为何呈现当前外观，并实时试验属性值的更改。

查看前面 Tile widget 的 build 方法：

class Tile extends StatelessWidget {
  const Tile(this.letter, this.hitType, {super.key});
​
  final String letter;
  final HitType hitType;
​
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60,
      height: 60,
      decoration: BoxDecoration(
        border: Border.all(color: Colors.grey.shade300),
        color: switch (hitType) {
          HitType.hit => Colors.green,
          HitType.partial => Colors.yellow,
          HitType.miss => Colors.grey,
          _ => Colors.white,
        },
      ),
    );
  }
}

如果你在 widget 检查器中选择 Tile 内的 Container widget，属性编辑器会显示其 width (60)、height (60) 以及 decoration 属性。然后你可以展开 BoxDecoration 以查看 border 和 color 属性。

对于许多属性，你甚至可以在属性编辑器中直接修改其值。例如，要快速测试 Tile widget 中 Container 的不同 width 或 height 效果，可在属性编辑器中更改数值。该工具会直接将此更新写回磁盘上的 .dart 源文件，让你在保存或触发热重载后立即在运行中的应用上查看视觉更新。这让你能够快速迭代 UI 设计。