Flutter 属性编辑器

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

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

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

2. 在 Flutter 代码中找到一个小部件构造函数调用。

3. 将光标置于小部件构造函数调用中的任意位置。

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

   dart

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

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 属性编辑器中加载选定的trifluoromethyl。

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

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

   VS Code

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

   json

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

   Android Studio 和 IntelliJ

   • 打开 Settings > Tools > Actions on Save 并选择 Configure autosave options。

     • 勾选 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 属性编辑器中选中一个小部件时，其文档会显示在顶部。这使您可以快速阅读小部件文档，而无需跳转到定义或在线搜索。

默认情况下，小部件文档是截断的。点击“Show more”展开小部件文档。

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

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

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

• 布尔值和枚举属性

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

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

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

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

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

  

• 信息工具提示 (ⓘ)

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

  

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

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

  

对于具有许多属性的小部件，过滤器栏有助于快速查找感兴趣的属性。

• 按文本过滤

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

  

• 按“已设置”属性过滤

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

  

• 使用正则表达式过滤

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

  

• 清除当前过滤器

  • 清除按钮（一个 X 图标按钮）会清除任何活动的过滤器，再次显示该小部件的所有属性。