使用舊版 Flutter Inspector

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

選擇 Widget 模式

啟用此按鈕可選擇裝置上的 Widget 進行檢查。如需瞭解更多資訊，請檢視 檢查 Widget。

重新整理樹

重新載入當前的 Widget 資訊。

慢速動畫

將動畫速度減慢 5 倍，以便進行微調。

顯示輔助線

疊加輔助線以幫助修復佈局問題。

顯示基線

顯示基線，用於對齊文字。這有助於檢查文字是否對齊。

高亮重繪

顯示當元素重繪時顏色會發生變化的邊框。有助於查詢不必要的重繪。

高亮過大圖片

透過反轉顏色和翻轉來高亮使用過多記憶體的圖片。

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

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

在除錯佈局問題時，關鍵欄位是 size 和 constraints 欄位。約束從上往下流動，大小從下往上流動。有關此工作原理的更多資訊，請參閱 理解約束。

Flutter 佈局瀏覽器可幫助您更好地理解 Flutter 佈局。

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

您可能還會發現以下分步文章很有幫助

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

在 Flutter Inspector 中，選擇一個 Widget。佈局瀏覽器支援 彈性佈局和固定尺寸佈局，併為兩者提供專門的工具。

當您選擇一個彈性 Widget（例如，Row、Column、Flex）或彈性 Widget 的直接子項時，彈性佈局工具將出現在佈局瀏覽器中。

佈局瀏覽器可視化了 Flex Widget 及其子項的佈局方式。瀏覽器會識別主軸和交叉軸，以及它們各自的當前對齊方式（例如，start、end 和 spaceBetween）。它還會顯示諸如 flex factor、flex fit 和佈局約束等詳細資訊。

此外，瀏覽器還會顯示佈局約束違規和渲染溢位錯誤。違反的佈局約束顯示為紅色，溢位錯誤則以標準的“黃色膠帶”模式呈現，就像在執行裝置上看到的那樣。這些視覺化旨在提高對溢位錯誤發生原因以及如何修復它們的理解。

點選佈局瀏覽器中的 Widget 會在裝置上的 Inspector 中映象選擇。為此需要啟用選擇 Widget 模式。要啟用它，請點選 Inspector 中的選擇 Widget 模式按鈕。

對於某些屬性，例如 flex factor、flex fit 和 alignment，您可以透過瀏覽器中的下拉列表修改其值。修改 Widget 屬性時，您會看到新值不僅在佈局瀏覽器中反映出來，而且在執行 Flutter 應用的裝置上也會反映出來。瀏覽器會根據屬性更改進行動畫，以便清楚地顯示更改的效果。從佈局瀏覽器進行的 Widget 屬性更改不會修改您的原始碼，並且會在熱過載時恢復。

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

支援的值

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

支援的值

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

佈局瀏覽器在 UI 中支援 7 種 flex 選項（null、0、1、2、3、4、5），但實際上 flex Widget 的子項的 flex 因子可以是任何整數。

佈局瀏覽器支援兩種不同的 FlexFit 型別：loose 和 tight。

當您選擇一個不是彈性 Widget 子項的固定尺寸 Widget 時，固定尺寸佈局資訊將出現在佈局瀏覽器中。您可以檢視選定 Widget 及其最近的上游 RenderObject 的大小、約束和填充資訊。

Flutter Inspector 提供了多種選項來直觀除錯您的應用。

啟用此選項後，動畫將以 5 倍慢速執行，以便於視覺檢查。如果您想仔細觀察和調整不盡如人意的動畫，這將非常有用。

也可以在程式碼中設定此項

import 'package:flutter/scheduler.dart';

void setSlowAnimations() {
  timeDilation = 5.0;
}

這會將動畫速度減慢 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;
}

此選項透過反轉顏色和垂直翻轉來高亮過大的圖片

高亮顯示的圖片使用的記憶體超過了必需；例如，一張 5MB 的大圖片以 100x100 畫素顯示。

這些圖片可能會導致效能下降，尤其是在低端裝置上以及當您有很多圖片時（例如在列表檢視中），這種效能影響會累加。每張圖片的詳細資訊會列印在除錯控制檯中

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。

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

以下是啟用和停用跟蹤 Widget 建立時的 Widget 樹示例。

啟用跟蹤 Widget 建立（預設）

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

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

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

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

預設情況下，DevTools 將 Widget 樹中顯示的 Widget 限制為專案根目錄和 Flutter 的 Widget。此篩選僅適用於 Inspector Widget 樹（Inspector 左側）中的 Widget，而不適用於 Widget 詳細資訊樹（Inspector 右側，與佈局瀏覽器位於同一選項卡檢視中）。在 Widget 詳細資訊樹中，您可以看到所有包中 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 教程。