Flutter 属性编辑器

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

你可以快速发现并修改 widget 现有及可用的构造函数参数，无需跳转到定义或手动编辑源码。此外，它与 Flutter 检查器和热重载集成，可实时查看变更，加快 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 检查器 配合使用，在两个工具中同时检查 widget。

1. 在你偏好的 IDE 中运行并调试 Flutter 应用。

   • VS Code 说明

   • Android Studio/IntelliJ 说明

2. 在 IDE 中打开 Flutter 检查器。

然后你可以通过以下任一方式，用 Flutter 检查器在 Flutter 属性编辑器中加载 widget：

1. 在树中选择 widget：

   • 在 检查器的 widget 树 中点击 widget。

2. 在应用中选择 widget：

   • 在检查器中启用 选择 widget 模式。

   • 在正在运行的应用中点击 widget。

两种操作都会自动：

• 跳转到源码中该 widget 的声明。

• 在 Flutter 属性编辑器中加载所选 widget。

Flutter 属性编辑器可与热重载配合，实时查看变更。

1. 在你偏好的 IDE 中启用自动保存与保存时热重载。

   VS Code

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

   json

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

   content_copy

   Android Studio and IntelliJ

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

     • 勾选 Save files if the IDE is idle for X seconds（IDE 空闲 X 秒后保存文件）。

     • Recommended:（推荐：）设置较短延迟，例如 2 秒。

   • 打开 Settings > Languages & Frameworks > Flutter（设置 > 语言与框架 > Flutter）。

     • 勾选 Perform hot reload on save（保存时执行热重载）。

2. 运行并调试 Flutter 应用。

   • VS Code 说明

   • Android Studio/IntelliJ 说明

3. 你在 Flutter 属性编辑器中所做的更改会自动反映到正在运行的应用中。

Flutter 属性编辑器配备多项功能，旨在加快开发流程。

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

默认情况下 widget 文档会被截断。点击 "Show more"（显示更多）可展开文档。

Flutter 属性编辑器为每个构造函数参数的类型提供对应的输入字段。

• string、double 和 int 属性：

  • 以文本输入框表示。

  • 在字段中输入新值即可。

  • 按 ••Tab•• 或 ••Enter•• 将编辑直接应用到源码。

• boolean 和 enum 属性：

  • 以下拉菜单表示。

  • 点击下拉菜单查看可用选项（布尔值为 true/false，或各 enum 值）。

  • 从列表中选择所需值以应用到代码。

• object 属性（例如 TextStyle、EdgeInsets、Color）：

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

Flutter 属性编辑器中每个属性输入都附带信息，帮助你理解其用法。

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

  

• 信息工具提示 (ⓘ)：

  • 将指针悬停在属性输入旁的信息图标上会显示工具提示。

  • 工具提示信息包括：

    • 若 widget 构造函数中定义了默认值，则显示该属性的默认值。

    • 该属性的任何文档。

  

• "Set" 和 "default" 标签：

  • 若属性已在源码中显式设置，输入旁会显示 "set" 标签，表示 widget 构造函数调用中提供了对应参数。

  • 若当前属性值与 widget 中定义的默认参数值一致，输入旁会显示 "default" 标签。

  若属性输入同时带有 "set" 和 "default" 标签，表示你在代码中显式提供了值，但该值与 widget 对该属性的默认值相同。此时可以安全地从代码中移除此参数以简化代码， widget 仍会使用默认值。 :::

  

对于属性较多的 widget，筛选栏可帮助快速定位感兴趣的属性。

• 按文本筛选：

  • 在筛选栏中输入即可。属性列表会动态更新，仅显示匹配项。

  • 可按属性名称、当前值或类型筛选。例如：

    • 输入 "main" 会筛选到 mainAxisAlignment、mainAxisSize 或名称含 "main" 的其他属性。

    • 输入 "true" 会筛选到当前设为 true 的所有布尔属性。

    • 输入 "double" 会筛选到所有 double 类型属性。

  

• 按「已设置」属性筛选：

  • 使用筛选菜单按钮打开筛选选项，勾选 "Only include properties that are set in the code."（仅包含代码中已设置的属性）。

  • 这会隐藏代码中未显式设置的所有属性，让你只关注已显式设置的属性。

  

• 使用正则表达式筛选：

  • 正则切换按钮（* 图标按钮）可为筛选输入开启正则模式。

  • 启用后，筛选文本会按正则表达式解析。

  

• 清除当前筛选：

  • 清除按钮（X 图标按钮）会清除所有活动筛选，再次显示 widget 的全部属性。