Flutter 檢查用戶(hù)界面

Flutter Widget Inspector

Flutter框架使用widget作為核心構(gòu)建塊，從控件（文本、按鈕、toggle等）到布局（居中、填充、行、列等）的任何內(nèi)容都是。 Inspector是用于可視化和瀏覽Flutter這些widget樹(shù)的強(qiáng)大工具。在以下情況下可能會(huì)有幫助：

• 不清楚現(xiàn)有布局
• 診斷布局問(wèn)題

點(diǎn)擊Flutter Inspector工具欄上的“Select widget”，然后點(diǎn)擊設(shè)備(真機(jī)或虛擬機(jī))以選擇一個(gè)widget。所選widget將在設(shè)備和widget樹(shù)中高亮顯示。

然后，您可以瀏覽IDE中的交互式widget樹(shù)，以查看附近的widget并查看其字段值。如果您想調(diào)試布局問(wèn)題，那么Widgets樹(shù)可能不夠詳細(xì)。 在這種情況下，單擊“Render Tree”選項(xiàng)卡查看樹(shù)中相同位置的渲染樹(shù)。當(dāng)調(diào)試布局問(wèn)題時(shí)，關(guān)鍵是看size和constraints字段。約束沿著樹(shù)向下傳遞，尺寸向上傳遞。

開(kāi)始使用Inspector

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