Flutter 属性编辑器

Flutter 属性编辑器是一个强大的 IDE 工具，它允许您直接从可视化界面查看和修改组件属性。

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

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

2. 在您的 Flutter 代码中找到一个 组件构造函数调用。

3. 将光标移动到组件构造函数调用的任何位置。

   例如，在以下 build 方法中，将光标放置在 Text 的 T 和 TextOverflow.clip 之后的结束括号 ) 之间。

   dart

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

   content_copy

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

Flutter 属性编辑器可以与 Flutter inspector 结合使用，以便同时在这两种工具中检查您的组件。

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

   • VS Code 指令
   • Android Studio/IntelliJ 指令

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

然后，您可以使用 Flutter inspector 通过以下方式在 Flutter 属性编辑器中加载组件：

1. 在树中选择组件

   • 单击 inspector 的组件树中的组件。

2. 在您的应用中选择组件

   • 在 inspector 中启用 “选择组件模式”。
   • 单击您正在运行的应用程序中的组件。

这两个操作都会自动

• 跳转到源代码中的组件声明。
• 在 Flutter 属性编辑器中加载所选组件。

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

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

   VS Code

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

   json

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

   content_copy

   Android Studio 和 IntelliJ

   • 打开 设置 > 工具 > 保存时执行的操作 并选择 配置自动保存选项。

     • 选中 IDE 空闲 X 秒后保存文件 选项。
     • 推荐： 设置较小的延迟时间。例如，2 秒。

   • 打开 设置 > 语言和框架 > Flutter。

     • 选中 保存时执行热重载 选项。

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

   • VS Code 指令
   • Android Studio/IntelliJ 指令

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

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

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

默认情况下，组件文档会被截断。单击“显示更多”以展开组件文档。

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

• 字符串、双精度浮点数和整数属性

  • 这些由文本输入字段表示。
  • 只需将新值键入字段即可。
  • 按 ••Tab•• 或 ••Enter•• 以直接将编辑应用于您的源代码。

• 布尔值和枚举属性

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

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

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

Flutter 属性编辑器中的每个属性输入都带有信息，以帮助您了解其用法。

• 类型和名称： 类型（例如，StackFit）和 名称（例如，fit）作为每个输入字段的标签显示。

  

• 信息工具提示 (ⓘ)

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

  

• “设置”和“默认”标签

  • 如果属性在您的源代码中显式设置，则输入旁边会显示 “设置” 标签。这意味着在组件构造函数调用中提供了一个相应的参数。
  • 如果当前属性值与组件中定义的默认参数值匹配，则输入旁边会显示 “默认” 标签。

  :::tip 如果属性输入同时具有“设置”和“默认”标签，则表示您在代码中显式提供了一个值，但该值与组件的默认值相同。在这种情况下，您可以安全地从代码中删除此参数，以使其更简洁，因为组件将无论如何使用默认值。 :::

  

对于具有许多属性的组件，筛选栏可以帮助快速找到感兴趣的属性。

• 按文本筛选

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

  

• 按“设置”属性筛选

  • 使用筛选菜单按钮打开筛选选项。选中“仅包含代码中设置的属性”。
  • 这将隐藏所有未在您的代码中显式设置的属性，使您可以专注于您显式设置的属性。

  

• 使用正则表达式筛选

  • 正则表达式切换按钮（一个 * 图标按钮）允许您切换筛选输入以使用正则表达式模式。
  • 启用后，您的筛选文本将被解释为正则表达式。

  

• 清除当前筛选器

  • 清除按钮（一个 X 图标按钮）清除任何活动的筛选器，再次显示组件的所有属性。