Flutter Widget Inspector
Flutter框架使用(yòng)widget作(zuò)爲核心構建塊，從(cóng)控件（文(wén)本、按鈕、toggle等）到(dào)布局（居中、填充、行、列等）的任何内容都是。 Inspector是用(yòng)于可視(shì)化和(hé)浏覽Flutter這(zhè)些(xiē)widget樹的強大(dà)工(gōng)具。在以下(xià)情況下(xià)可能(néng)會(huì)有幫助：
不清楚現(xiàn)有布局
診斷布局問題
IntelliJ Flutter Inspector Window
點擊Flutter Inspector工(gōng)具欄上(shàng)的“Select widget”，然後點擊設備(真機或虛拟機)以選擇一個widget。所選widget将在設備和(hé)widget樹中高(gāo)亮(liàng)顯示。
Select Demo
然後，您可以浏覽IDE中的交互式widget樹，以查看(kàn)附近的widget并查看(kàn)其字段值。如果您想調試布局問題，那麽Widgets樹可能(néng)不夠詳細。 在這(zhè)種情況下(xià)，單擊“Render Tree”選項卡查看(kàn)樹中相同位置的渲染樹。當調試布局問題時(shí)，關鍵是看(kàn)size和(hé)constraints字段。約束沿着樹向下(xià)傳遞，尺寸向上(shàng)傳遞。
Switch Trees
開(kāi)始使用(yòng)Inspector
Inspector目前可用(yòng)于Android Studio或IntelliJ IDEA的Flutter插件。
網站(zhàn)建設開(kāi)發|APP設計(jì)開(kāi)發|小(xiǎo)程序建設開(kāi)發