Flutter 属性编辑器

Flutter 属性编辑器是一款强大的 IDE 工具，让您可以直接通过可视化界面查看和修改 Widget 属性。

它使您能够快速发现并修改 Widget 现有及可用的构造函数参数，无需跳转到定义或手动编辑源代码。此外，它与 Flutter Inspector 和热重载 (hot reload) 的集成，使您能够实时查看更改，从而加速 UI 开发和迭代。

1. 在您支持的 IDE（VS Code、Android Studio/IntelliJ）中打开 Flutter 属性编辑器。

2. 在您的 Flutter 代码中找到 Widget 构造函数调用。

3. 将光标移动到 Widget 构造函数调用内的任意位置。

   例如，在下面的 build 方法中，将光标放置在 Text 的 T 到 TextOverflow.clip 后面的右括号 ) 之间的任意位置。

   dart

   @override
   Widget build(BuildContext context) {
       return Text(
           'Hello World!',
           overflow: TextOverflow.clip,
       );
   }
   

   content_copy

4. Flutter 属性编辑器面板会自动更新，以显示光标所在位置 Widget 的属性。

Flutter 属性编辑器可以与 Flutter Inspector 结合使用，在两个工具中同时检查 Widget。

1. 从您首选的 IDE 中运行并调试您的 Flutter 应用程序。

   • VS Code 说明
   • Android Studio/IntelliJ 说明

2. 在您的 IDE 中打开 Flutter Inspector。

然后，您可以通过以下任一方式使用 Flutter Inspector 在 Flutter 属性编辑器中加载 Widget：

1. 在树中选择 Widget

   • 点击 Inspector 的 Widget 树中的 Widget。

2. 在您的应用中选择 Widget

   • 启用 Inspector 中的 “选择 Widget 模式” (Select Widget Mode)。
   • 点击正在运行的应用程序中的 Widget。

上述两个操作都会自动执行：

• 跳转到源代码中该 Widget 的声明位置。
• 在 Flutter 属性编辑器中加载所选的 Widget。

Flutter 属性编辑器可以与热重载结合使用，以实时查看更改。

1. 从您首选的 IDE 中，启用自动保存和保存时热重载。

   VS Code

   将以下内容添加到你的 .vscode/settings.json 文件中

   json

   "files.autoSave": "afterDelay",
   "dart.flutterHotReloadOnSave": "all",
   

   content_copy

   Android Studio 和 IntelliJ

   • 打开 设置 (Settings) > 工具 (Tools) > 保存时操作 (Actions on Save) 并选择 配置自动保存选项 (Configure autosave options)。

     • 勾选 如果 IDE 空闲 X 秒则保存文件 (Save files if the IDE is idle for X seconds) 选项。
     • 推荐： 设置较短的延迟时间。例如，2 秒。

   • 打开 设置 (Settings) > 语言和框架 (Languages & Frameworks) > Flutter。

     • 勾选 保存时执行热重载 (Perform hot reload on save) 选项。

2. 运行并调试您的 Flutter 应用程序。

   • VS Code 说明
   • Android Studio/IntelliJ 说明

3. 您在 Flutter 属性编辑器中所做的任何更改都会自动反映在正在运行的应用程序中。

Flutter 属性编辑器配备了多种旨在加快开发过程的功能。

在 Flutter 属性编辑器中选择 Widget 时，其文档会显示在顶部。这使您可以快速阅读 Widget 文档，而无需跳转到定义或在线搜索。

默认情况下，Widget 文档会被截断。点击“显示更多” (Show more) 可展开 Widget 文档。

Flutter 属性编辑器包含针对每个构造函数参数类型定制的输入字段。

• String、double 和 int 属性

  • 这些由文本输入字段表示。
  • 只需在字段中键入新值即可。
  • 按 ••Tab•• 或 ••Enter•• 键可将更改直接应用到您的源代码中。

• Boolean 和 enum 属性

  • 这些由下拉菜单表示。
  • 点击下拉菜单查看可用选项（布尔值为 true/false，或各种枚举值）。
  • 从列表中选择所需的值以将其应用到您的代码中。

• 对象属性（例如 TextStyle、EdgeInsets、Color）

  • 目前不支持。Flutter 属性编辑器尚不允许直接编辑复杂对象属性。您需要直接在源代码中编辑这些属性。

Flutter 属性编辑器中的每个属性输入都附有帮助您理解其用法的相关信息。

• 类型和名称： 构造函数参数的类型（例如 StackFit）和名称（例如 fit）显示为每个输入字段的标签。

  

• 信息提示 (ⓘ)

  • 将鼠标悬停在属性输入旁边的信息图标上会显示工具提示。
  • 工具提示中的信息包括：
    • 属性的默认值（如果 Widget 的构造函数中定义了该值）。
    • 该属性的任何文档。

  

• “Set”和“default”标签

  • 如果属性已在源代码中明确设置，则“set”标签会出现在输入框旁边。这意味着 Widget 构造函数调用中提供了相应的参数。
  • 如果当前属性值与 Widget 中定义的默认参数值匹配，则“default”标签会出现在输入框旁边。

  :::tip 如果属性输入同时具有“set”和“default”标签，则表示您在代码中明确提供了一个值，但该值与 Widget 对该属性的默认值相同。在这种情况下，您可以放心地从代码中删除该参数以使其更简洁，因为 Widget 无论如何都会使用默认值。 ::

  

对于具有许多属性的 Widget，过滤器栏可以帮助快速定位感兴趣的属性。

• 按文本过滤

  • 只需在过滤器栏中输入内容。属性列表将动态更新，仅显示匹配您输入的内容。
  • 您可以按属性的名称、当前值或其类型进行过滤。例如：
  • 输入“main”将过滤出 mainAxisAlignment、mainAxisSize 或名称中包含“main”的其他属性。
  • 输入“true”将过滤出所有当前设置为 true 的布尔属性。
  • 输入“double”将过滤出所有类型为 double 的属性。