Flutter 项目开启 UI 层级虚线（UI Guides）

文章目录

• 前言
• • [Flutter 的 UI 层级虚线（UI Guides）开启步骤](#Flutter 的 UI 层级虚线（UI Guides）开启步骤)
  • • [1. 安装 VS Code 必备插件](#1. 安装 VS Code 必备插件)
    • [2. 打开 VS Code 设置（settings.json）](#2. 打开 VS Code 设置（settings.json）)
    • [3. 添加 UI Guides 配置](#3. 添加 UI Guides 配置)
    • [4. 保存并重启 VS Code](#4. 保存并重启 VS Code)
    • [5. 效果展示](#5. 效果展示)
    • [6. 常见问题与解决](#6. 常见问题与解决)
  • 总结

---

前言

下面是**在 VS Code 中为 Flutter 项目开启 UI 层级虚线（UI Guides）**的详细步骤总结

---

Flutter 的 UI 层级虚线（UI Guides）开启步骤

1. 安装 VS Code 必备插件

• 打开 VS Code，进入扩展（Extensions）面板。
• 搜索并安装：
  • Flutter
  • Dart
• 这两个插件是 Flutter 开发的基础，UI Guides 功能由 Dart 插件提供。

---

2. 打开 VS Code 设置（settings.json）

• 按下 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac），输入并选择：
  Preferences: Open Settings (JSON)
• 也可以通过菜单：
  Code > Preferences > Settings，然后点击右上角 {} 图标进入 JSON 编辑模式。

---

3. 添加 UI Guides 配置

在 settings.json 文件中添加如下配置：

"dart.previewFlutterUiGuides": true

这行配置的作用是：在代码编辑区左侧显示 Flutter Widget 的层级虚线（UI Guides），让嵌套结构一目了然。

---

4. 保存并重启 VS Code

• 保存 settings.json 文件。
• 建议重启 VS Code，确保设置生效。

---

5. 效果展示

• 打开你的 Flutter 项目中的 .dart 文件（如 lib/main.dart）。

• 你会在代码左侧看到类似下图的虚线，清晰展示 Widget 的嵌套层级：

  Scaffold(
  ├─ appBar: AppBar(
  └─ body: Center(
      └─ child: Column(
          ├─ children: [
          │   Text('Hello'),
          │   Text('World'),
          │   ...

  实际效果为竖直的虚线，帮助你快速理解和定位 Widget 层级。

---

6. 常见问题与解决

• 没有效果？
  • 检查 Dart 和 Flutter 插件是否都已安装并启用。
  • 确认 settings.json 配置无误。
  • 重启 VS Code。
• 还是不行？
  • 卸载重装 Dart/Flutter 插件。
  • 检查 VS Code 是否为最新版。

---

总结

通过开启 "dart.previewFlutterUiGuides": true，你可以在 VS Code 里直观地看到 Flutter Widget 的嵌套层级，大大提升代码可读性和开发效率，非常适合写 Flutter 布局和调试复杂页面时使用。