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