Flutter 屬性編輯器

Flutter 屬性編輯器是一款強大的 IDE 工具，可讓您透過視覺化介面直接檢視和修改小部件屬性。

它允許您快速發現和修改小部件的現有和可用建構函式引數，無需跳轉到定義或手動編輯原始碼。此外，它與 Flutter Inspector 和熱過載的整合使您能夠即時檢視更改，從而加快 UI 開發和迭代速度。

1. 在支援的 IDE 中開啟 Flutter 屬性編輯器（VS Code、Android Studio/IntelliJ）。

2. 在 Flutter 程式碼中找到一個小部件建構函式呼叫。

3. 將游標置於小部件建構函式呼叫中的任意位置。

   例如，在以下 build 方法中，將游標置於 Text 的 T 和 TextOverflow.clip 後面的結束括號 ) 之間的任意位置。

   dart

   @override
   Widget build(BuildContext context) {
       return Text(
           'Hello World!',
           overflow: TextOverflow.clip,
       );
   }

4. Flutter 屬性編輯器面板會自動更新，以顯示游標位置處小部件的屬性。

Flutter 屬性編輯器可以與Flutter Inspector結合使用，以便在兩個工具中同時檢查小部件。

1. 從您喜歡的 IDE 中執行和除錯您的 Flutter 應用程式。

   • VS Code 說明
   • Android Studio/IntelliJ 說明

2. 在您的 IDE 中開啟Flutter Inspector。

然後，您可以使用 Flutter Inspector 在 Flutter 屬性編輯器中載入一個小部件，方法是：

1. 在樹中選擇一個小部件

   • 點選Inspector 的小部件樹中的一個小部件。

2. 在您的應用中選擇一個小部件

   • 在 Inspector 中啟用“選擇小部件模式”。
   • 點選正在執行的應用程式中的一個小部件。

這兩個操作都會自動

• 跳轉到原始碼中的小部件宣告。
• 在 Flutter 屬性編輯器中載入選定的trifluoromethyl。

Flutter 屬性編輯器可以與熱過載結合使用，以即時檢視更改。

1. 從您喜歡的 IDE 中，啟用儲存時的自動儲存和熱過載。

   VS Code

   將以下內容新增到你的 .vscode/settings.json 檔案中

   json

   "files.autoSave": "afterDelay",
   "dart.flutterHotReloadOnSave": "all",

   Android Studio 和 IntelliJ

   • 開啟 Settings > Tools > Actions on Save 並選擇 Configure autosave options。

     • 勾選 Save files if the IDE is idle for X seconds 選項。
     • 推薦：設定較短的延遲時間。例如，2 秒。

   • 開啟 Settings > Languages & Frameworks > Flutter。

     • 勾選 Perform hot reload on save 選項。

2. 執行並除錯您的 Flutter 應用程式。

   • VS Code 說明
   • Android Studio/IntelliJ 說明

3. 您從 Flutter 屬性編輯器所做的任何更改都會自動反映在您正在執行的應用程式中。

Flutter 屬性編輯器配備了多項旨在加快開發過程的功能。

當在 Flutter 屬性編輯器中選中一個小部件時，其文件會顯示在頂部。這使您可以快速閱讀小部件文件，而無需跳轉到定義或線上搜尋。

預設情況下，小部件文件是截斷的。點選“Show more”展開小部件文件。

Flutter 屬性編輯器包含針對每個建構函式引數型別量身定製的輸入欄位。

• 字串、雙精度和整數屬性

  • 這些由文字輸入欄位表示。
  • 只需在新值欄位中鍵入新值。
  • 按 ••Tab•• 或 ••Enter•• 即可直接將編輯應用到您的原始碼。

• 布林值和列舉屬性

  • 這些由下拉選單表示。
  • 點選下拉選單可檢視可用選項（布林值的 true/false，或各種列舉值）。
  • 從列表中選擇所需的值即可將其應用於您的程式碼。

• 物件屬性（例如 TextStyle、EdgeInsets、Color）

  • 目前不支援。Flutter 屬性編輯器尚不允許直接編輯複雜物件屬性。您需要直接在原始碼中編輯這些屬性。

Flutter 屬性編輯器中的每個屬性輸入都附帶資訊，以幫助您瞭解其用法。

• 型別和名稱：建構函式引數的型別（例如，StackFit）和名稱（例如，fit）顯示為每個輸入欄位的標籤。

  

• 資訊工具提示 (ⓘ)

  • 將滑鼠懸停在屬性輸入旁邊的資訊圖示上會顯示一個工具提示。
  • 工具提示中的資訊包括
    • 屬性的預設值（如果已在小部件建構函式中定義）。
    • 該屬性的任何文件。

  

• “已設定”和“預設”標籤

  • 如果屬性已在您的原始碼中顯式設定，則輸入旁邊會顯示“已設定”標籤。這意味著在小部件建構函式呼叫中提供了相應的引數。
  • 如果當前屬性值與小部件中定義的引數預設值匹配，則輸入旁邊會顯示“預設”標籤。

  

對於具有許多屬性的小部件，過濾器欄有助於快速查詢感興趣的屬性。

• 按文字過濾

  • 只需在過濾器欄中鍵入內容即可。屬性列表將動態更新，僅顯示與您的輸入匹配的屬性。
  • 您可以按屬性的名稱、當前值或型別進行過濾。例如：
    • 鍵入“main”將過濾到 mainAxisAlignment、mainAxisSize 或名稱中包含“main”的其他屬性。
    • 鍵入“true”將過濾到所有當前設定為 true 的布林屬性。
    • 鍵入“double”將過濾到所有 double 型別的屬性。

  

• 按“已設定”屬性過濾

  • 使用過濾器選單按鈕開啟過濾器選項。勾選“僅包含在程式碼中設定的屬性”。
  • 這將隱藏所有未在程式碼中顯式設定的屬性，使您只能專注於您已顯式設定的屬性。

  

• 使用正則表示式過濾

  • 正則表示式切換按鈕（一個 * 圖示按鈕）允許您為過濾器輸入啟用正則表示式模式。
  • 啟用後，您的過濾器文字將被解釋為正則表示式。

  

• 清除當前過濾器

  • 清除按鈕（一個 X 圖示按鈕）會清除任何活動的過濾器，再次顯示該小部件的所有屬性。