它是什么?

#

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

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

Flutter Property Editor

如何访问 Flutter 属性编辑器

#
  1. 在受支持的 IDE 中打开 Flutter 属性编辑器(VS CodeAndroid Studio/IntelliJ)。

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

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

    例如,在以下 build 方法中,将光标放在 TextTTextOverflow.clip 之后的结束括号 ) 之间的任意位置。

    dart
    @override
    Widget build(BuildContext context) {
        return Text(
            'Hello World!',
            overflow: TextOverflow.clip,
        );
    }
  4. Flutter 属性编辑器面板会自动更新,显示光标位置处组件的属性。

运行时使用

#

与 Flutter Inspector 的集成

#

Flutter 属性编辑器可以与 Flutter Inspector 结合使用,在两个工具中同时检查你的组件。

  1. 从你偏好的 IDE 运行并调试你的 Flutter 应用程序。

  2. 在你的 IDE 中打开 Flutter Inspector

然后,你可以通过以下方式使用 Flutter Inspector 在 Flutter 属性编辑器中加载组件:

  1. 在树中选择组件

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

这两种操作都将自动

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

与热重载的集成

#

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 应用程序。

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

功能集

#

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

查看组件文档

#

当在 Flutter 属性编辑器中选择一个组件时,其文档会显示在顶部。这允许你快速阅读组件文档,而无需跳转到定义或在线搜索。

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

Flutter Property Editor gif displaying the documentation for a Text widget

编辑组件属性

#

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

  • string、double 和 int 属性

    • 这些由文本输入字段表示。
    • 只需在字段中输入新值。
    • 按下 ••Tab•• 或 ••Enter•• 将编辑直接应用到你的源代码。
  • boolean 和 enum 属性

    • 这些由下拉菜单表示。
    • 点击下拉菜单查看可用选项(布尔值为 true/false,或各种枚举值)。
    • 从列表中选择所需值,以将其应用到你的代码。
  • 对象属性(例如,TextStyleEdgeInsetsColor

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

理解属性输入

#

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

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

    Type and name label for a property input

  • 信息提示(ⓘ)

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

    Info tooltip for a property input

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

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

    "Set" and "default" labels for a property input

筛选属性

#

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

  • 按文本筛选

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

    Filter input with filtering by text highlighted

  • 按“已设置”属性筛选

    • 使用筛选菜单按钮打开筛选选项。勾选“仅包含代码中已设置的属性”。
    • 这会隐藏所有未在代码中显式设置的属性,让你只关注已显式设置的属性。

    Filter input with filter menu button highlighted

  • 使用正则表达式筛选

    • 正则表达式切换按钮(一个 * 图标按钮)允许你为筛选输入启用正则表达式模式。
    • 启用后,你的筛选文本将被解释为正则表达式。

    Filter input with regex toggle highlighted

  • 清除当前筛选

    • 清除按钮(一个 X 图标按钮)会清除所有活动的筛选,再次显示组件的所有属性。

    Filter input with clear button highlighted