使用舊版 Flutter inspector

以下是 inspector 工具欄中可用功能的指南。當空間有限時，圖示將作為標籤的視覺版本使用。

選擇 Widget 模式

啟用此按鈕以在裝置上選擇要檢查的 Widget。要了解更多資訊，請檢視檢查 Widget。

重新整理樹

重新載入當前的 Widget 資訊。

慢速動畫

將動畫執行速度放慢 5 倍，以幫助微調動畫。

顯示輔助線

覆蓋顯示輔助線，以輔助修復佈局問題。

顯示基準線

顯示用於對齊文字的基準線。這對於檢查文字是否對齊非常有用。

高亮重繪

顯示在元素重繪時會變色的邊框。對於查詢不必要的重繪非常有用。

高亮顯示超大圖片

透過反轉顏色並翻轉圖片，來高亮顯示那些佔用過多記憶體的圖片。

您可以瀏覽互動式 Widget 樹，檢視相鄰的 Widget 並檢視其欄位值。

要在 Widget 樹中定位特定的 UI 元素，請點選工具欄中的選擇 Widget 模式按鈕。這將使裝置上的應用進入“Widget 選擇”模式。點選應用 UI 中的任何 Widget；這會在應用螢幕上選中該 Widget，並將 Widget 樹滾動到相應的節點。再次切換選擇 Widget 模式按鈕即可退出選擇模式。

除錯佈局問題時，需要檢視的關鍵欄位是 size（大小）和 constraints（約束）。約束沿樹向下流動，而大小則沿樹向上回傳。有關其工作原理的更多資訊，請參閱理解約束。

Flutter 佈局資源管理器 (Layout Explorer) 可幫助您更好地理解 Flutter 佈局。

有關該工具功能的概述，請參閱 Flutter Explorer 影片

在 YouTube 新標籤頁中觀看：“DevTools Layout Explorer”

您可能還會發現以下分步指南很有用

• 如何使用 Flutter Inspector 除錯佈局問題

在 Flutter Inspector 中，選擇一個 Widget。佈局資源管理器支援彈性佈局 (flex layouts) 和固定尺寸佈局，併為兩者提供了專門的工具。

當您選擇一個彈性 Widget（例如 Row、Column、Flex）或彈性 Widget 的直接子級時，佈局資源管理器中會出現彈性佈局工具。

佈局資源管理器可視化了 Flex Widget 及其子級的佈局方式。該資源管理器標識了主軸和交叉軸，以及每個軸的當前對齊方式（例如 start、end 和 spaceBetween）。它還顯示了諸如彈性因子 (flex factor)、彈性適配 (flex fit) 和佈局約束等詳細資訊。

此外，該資源管理器還顯示佈局約束衝突和渲染溢位錯誤。違反的佈局約束以紅色顯示，溢位錯誤則以您在執行中的裝置上可能看到的標準“黃條”模式呈現。這些視覺化旨在提高對溢位錯誤發生原因以及如何修復它們的理解。

點選佈局資源管理器中的 Widget 會映象裝置上 inspector 的選中狀態。為此需要啟用選擇 Widget 模式。要啟用它，請點選 inspector 中的選擇 Widget 模式按鈕。

對於某些屬性，如彈性因子、彈性適配和對齊方式，您可以透過資源管理器中的下拉列表修改其值。修改 Widget 屬性時，您不僅會在佈局資源管理器中看到新值，還會看到在執行 Flutter 應用的裝置上即時生效。資源管理器會對屬性變更進行動畫處理，使變更效果清晰可見。透過佈局資源管理器所做的 Widget 屬性變更不會修改您的原始碼，並且在熱過載後會還原。

佈局資源管理器支援修改 mainAxisAlignment、crossAxisAlignment 和 FlexParentData.flex。未來，我們可能會增加對其他屬性的支援，例如 mainAxisSize、textDirection 和 FlexFit。

mainAxisAlignment

支援的值

• MainAxisAlignment.start
• MainAxisAlignment.end
• MainAxisAlignment.center
• MainAxisAlignment.spaceBetween
• MainAxisAlignment.spaceAround
• MainAxisAlignment.spaceEvenly

crossAxisAlignment

支援的值

• CrossAxisAlignment.start
• CrossAxisAlignment.center
• CrossAxisAlignment.end
• CrossAxisAlignment.stretch

FlexParentData.flex

佈局資源管理器在 UI 中支援 7 個彈性選項 (null, 0, 1, 2, 3, 4, 5)，但從技術上講，彈性 Widget 子級的彈性因子可以是任何整數。

Flexible.fit

佈局資源管理器支援兩種型別的 FlexFit：loose 和 tight。

當您選擇一個不是彈性 Widget 子級的固定尺寸 Widget 時，固定尺寸佈局資訊將出現在佈局資源管理器中。您可以檢視所選 Widget 及其最近上游 RenderObject 的大小、約束和內邊距資訊。

Flutter Inspector 提供了多種選項來對您的應用進行視覺化除錯。

啟用此選項後，動畫將以 5 倍慢速執行，以便於視覺檢查。如果您想仔細觀察和微調看起來不太對勁的動畫，這非常有用。

這也可以在程式碼中設定

import 'package:flutter/scheduler.dart';
​
void setSlowAnimations() {
  timeDilation = 5.0;
}

這會將動畫速度降低至原來的 1/5。

以下連結提供了更多資訊。

• Flutter 文件：timeDilation 屬性

以下螢幕錄影展示了動畫減速前後的對比。

此功能會在您的應用上繪製輔助線，顯示渲染框、對齊方式、內邊距、滾動檢視、裁剪區域和間隔器。

此工具可用於更好地理解您的佈局。例如，透過查詢不需要的內邊距或理解 Widget 的對齊方式。

您也可以在程式碼中啟用它

import 'package:flutter/rendering.dart';
​
void showLayoutGuidelines() {
  debugPaintSizeEnabled = true;
}

繪製到螢幕上的 Widget 會建立 渲染框，這是 Flutter 佈局的構建塊。它們以亮藍色邊框顯示

對齊方式用黃色箭頭表示。這些箭頭顯示了 Widget 相對於其父級的垂直和水平偏移量。例如，該按鈕的圖示透過四個箭頭顯示為居中狀態

內邊距以半透明藍色背景顯示

帶有滾動內容的 Widget（如列表檢視）以綠色箭頭顯示

裁剪（例如使用 ClipRect Widget 時）以帶有剪刀圖示的虛線粉色線條顯示

間隔器 Widget 以灰色背景顯示，例如這個沒有子級的 SizedBox

此選項使所有基準線可見。基準線是用於定位文字的水平線。

這對於檢查文字是否在垂直方向上精確對齊非常有用。例如，在下方的截圖中，文字基準線略有不對齊

Baseline Widget 可用於調整基準線。

任何設定了基準線的 渲染框 上都會畫出一條線；字母基準線顯示為綠色，表意文字基準線顯示為黃色。

您也可以在程式碼中啟用它

import 'package:flutter/rendering.dart';
​
void showBaselines() {
  debugPaintBaselinesEnabled = true;
}

此選項在所有 渲染框 周圍繪製邊框，這些邊框會在框每次重繪時改變顏色。

這種不斷旋轉的彩虹色對於發現應用中重繪過於頻繁並可能損害效能的部分非常有用。

例如，一個小的動畫可能會導致整個頁面在每一幀都進行重繪。將動畫包裝在 RepaintBoundary Widget 中可以將重繪限制在僅該動畫區域內。

在這裡，進度指示器導致其容器重繪

class EverythingRepaintsPage extends StatelessWidget {
  const EverythingRepaintsPage({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(child: CircularProgressIndicator()),
    );
  }
}

將進度指示器包裝在 RepaintBoundary 中會導致僅螢幕的該部分進行重繪

class AreaRepaintsPage extends StatelessWidget {
  const AreaRepaintsPage({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Repaint Example')),
      body: const Center(
        child: RepaintBoundary(child: CircularProgressIndicator()),
      ),
    );
  }
}

RepaintBoundary Widget 是有權衡的。它們可以提高效能，但也會帶來建立新畫布的開銷，這會消耗額外的記憶體。

您也可以在程式碼中啟用此選項

import 'package:flutter/rendering.dart';
​
void highlightRepaints() {
  debugRepaintRainbowEnabled = true;
}

此選項透過反轉圖片顏色並垂直翻轉圖片，來高亮顯示那些過大的圖片

被高亮顯示的圖片佔用了超出所需的記憶體；例如，一張 100x100 畫素區域顯示的 5MB 大圖片。

此類圖片可能導致效能不佳，特別是在低端裝置上。當有許多此類圖片時（例如在列表檢視中），這種效能影響會累加。有關每張圖片的資訊會列印在除錯控制檯中

dash.png has a display size of 213×392 but a decode size of 2130×392, which uses an additional 2542KB.

如果圖片佔用的記憶體比所需的多出至少 128KB，則被認為過大。

儘可能地，解決此問題的最佳方法是調整圖片資原始檔的大小，使其更小。

如果無法做到，您可以使用 Image 建構函式中的 cacheHeight 和 cacheWidth 引數

class ResizedImage extends StatelessWidget {
  const ResizedImage({super.key});
​
  @override
  Widget build(BuildContext context) {
    return Image.asset('dash.png', cacheHeight: 213, cacheWidth: 392);
  }
}

這使得引擎按指定的大小解碼此圖片，從而減少記憶體使用（解碼和儲存的開銷仍然比縮小圖片資原始檔本身更大）。無論這些引數如何，圖片都會按照佈局的約束或指定的寬度和高度進行渲染。

此屬性也可以在程式碼中設定

void showOversizedImages() {
  debugInvertOversizedImages = true;
}

您可以透過以下連結瞭解更多資訊

• Flutter 文件：debugInvertOversizedImages

選擇 Widget 詳情樹標籤以顯示所選 Widget 的詳情樹。從這裡，您可以收集有關 Widget 屬性、渲染物件和子級的有用資訊。

Flutter inspector 的部分功能基於對應用程式程式碼進行插樁，以便更好地理解 Widget 的建立源位置。原始碼插樁允許 Flutter inspector 以類似於您在原始碼中定義 UI 的方式呈現 Widget 樹。沒有它，Widget 樹中的節點層級會深得多，並且很難理解執行時的 Widget 層級如何與您的應用 UI 相對應。

您可以透過向 flutter run 命令傳遞 --no-track-widget-creation 引數來停用此功能。

以下是啟用和停用“跟蹤 Widget 建立”功能後，Widget 樹可能呈現的示例。

啟用跟蹤 Widget 建立（預設）

停用跟蹤 Widget 建立（不推薦）

此功能阻止原本相同的 const Widget 在除錯構建中被視為相等。有關更多詳細資訊，請參閱關於除錯常見問題的討論。

懸停在任何 Widget 上都會顯示其屬性和值。

切換此值可以啟用或停用懸停檢查功能。

預設情況下，DevTools 將 Widget 樹中顯示的 Widget 限制為專案根目錄和 Flutter SDK 中的 Widget。此過濾僅適用於 Inspector Widget 樹（Inspector 左側）中的 Widget，而不適用於 Widget 詳情樹（Inspector 右側，與佈局資源管理器在同一標籤頁檢視中）。在 Widget 詳情樹中，您可以檢視來自所有包的樹中所有 Widget。

為了顯示其他 Widget，必須將其父目錄新增到“包目錄”中。

例如，考慮以下目錄結構

project_foo
  pkgs
    project_foo_app
    widgets_A
    widgets_B

從 project_foo_app 執行您的應用，僅在 Widget inspector 樹中顯示來自 project_foo/pkgs/project_foo_app 的 Widget。

要顯示來自 widgets_A 的 Widget，請將 project_foo/pkgs/widgets_A 新增到包目錄中。

要顯示專案根目錄中的所有 Widget，請將 project_foo 新增到包目錄中。

您對包目錄所做的更改在下次開啟該應用的 Widget inspector 時會持久儲存。

關於 inspector 的通用功能演示，請參閱 DartConf 2018 演講，其中演示了 IntelliJ 版本的 Flutter inspector。

要了解如何使用 DevTools 對佈局問題進行視覺化除錯，請檢視引導式的 Flutter Inspector 教程。