使用Inspector檢查用戶界面

Flutter Widget Inspector是用于可視化和瀏覽Flutter Widget樹的強大工具。

Flutter Widget Inspector

Flutter框架使用widget作為核心構建塊,從控件(文本、按鈕、toggle等)到布局(居中、填充、行、列等)的任何內容都是。 Inspector是用于可視化和瀏覽Flutter這些widget樹的強大工具。在以下情況下可能會有幫助:

  • 不清楚現有布局
  • 診斷布局問題

IntelliJ Flutter Inspector Window

點擊Flutter Inspector工具欄上的“Select widget”,然后點擊設備(真機或虛擬機)以選擇一個widget。所選widget將在設備和widget樹中高亮顯示。

Select Demo

然后,您可以瀏覽IDE中的交互式widget樹,以查看附近的widget并查看其字段值。如果您想調試布局問題,那么Widgets樹可能不夠詳細。 在這種情況下,單擊“Render Tree”選項卡查看樹中相同位置的渲染樹。當調試布局問題時,關鍵是看sizeconstraints字段。約束沿著樹向下傳遞,尺寸向上傳遞。

Switch Trees

有關Inspector的更完整演示,請參閱最近的DartConf talk.

開始使用Inspector

Inspector目前可用于Android Studio或IntelliJ IDEA的Flutter插件

反饋問題

如果您有任何建議或遇到問題,請在file an issue in our tracker此提交。


所屬標簽

無標簽

官方入門指南

Flutter官方發布的入門指導,包括了如何在不同的平臺(Windows, Mac, Linux)上搭建開發環境,以及一些入門級的指導,以便您從零開始進入Flutter的世界,同時,一些Flutter的框架API,也是您開發時必不可少的工具書。

從這里進入


25选5玩法中奖