Flutter 屬性編輯器

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

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

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

2. 在您的 Flutter 程式碼中找到 Widget 建構函式呼叫。

3. 將游標移動到 Widget 建構函式呼叫內的任意位置。

   例如，在下面的 build 方法中，將游標放置在 Text 的 T 到 TextOverflow.clip 後面的右括號 ) 之間的任意位置。

   dart

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

   content_copy

4. Flutter 屬性編輯器面板會自動更新，以顯示游標所在位置 Widget 的屬性。

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

1. 從您首選的 IDE 中執行並除錯您的 Flutter 應用程式。

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

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

然後，您可以透過以下任一方式使用 Flutter Inspector 在 Flutter 屬性編輯器中載入 Widget：

1. 在樹中選擇 Widget

   • 點選 Inspector 的 Widget 樹中的 Widget。

2. 在您的應用中選擇 Widget

   • 啟用 Inspector 中的 “選擇 Widget 模式” (Select Widget Mode)。
   • 點選正在執行的應用程式中的 Widget。

上述兩個操作都會自動執行：

• 跳轉到原始碼中該 Widget 的宣告位置。
• 在 Flutter 屬性編輯器中載入所選的 Widget。

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

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

   VS Code

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

   json

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

   content_copy

   Android Studio 和 IntelliJ

   • 開啟 設定 (Settings) > 工具 (Tools) > 儲存時操作 (Actions on Save) 並選擇 配置自動儲存選項 (Configure autosave options)。

     • 勾選 如果 IDE 空閒 X 秒則儲存檔案 (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 屬性編輯器中選擇 Widget 時，其文件會顯示在頂部。這使您可以快速閱讀 Widget 文件，而無需跳轉到定義或線上搜尋。

預設情況下，Widget 文件會被截斷。點選“顯示更多” (Show more) 可展開 Widget 文件。

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

• String、double 和 int 屬性

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

• Boolean 和 enum 屬性

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

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

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

Flutter 屬性編輯器中的每個屬性輸入都附有幫助您理解其用法的相關資訊。

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

  

• 資訊提示 (ⓘ)

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

  

• “Set”和“default”標籤

  • 如果屬性已在原始碼中明確設定，則“set”標籤會出現在輸入框旁邊。這意味著 Widget 建構函式呼叫中提供了相應的引數。
  • 如果當前屬性值與 Widget 中定義的預設引數值匹配，則“default”標籤會出現在輸入框旁邊。

  :::tip 如果屬性輸入同時具有“set”和“default”標籤，則表示您在程式碼中明確提供了一個值，但該值與 Widget 對該屬性的預設值相同。在這種情況下，您可以放心地從程式碼中刪除該引數以使其更簡潔，因為 Widget 無論如何都會使用預設值。 ::

  

對於具有許多屬性的 Widget，過濾器欄可以幫助快速定位感興趣的屬性。

• 按文字過濾

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