Flutter — 加快開發速度的 IDE 快捷方式【Flutter專題2】

flutter — 加快開發速度的 IDE 快捷方式

我是早起的年輕人-堅果,歡迎大家關注我的公眾號堅果前端，哪里有更多的寶藏等待大家發掘。

接下來開始正文。

如果您是 flutter 開發的新手，那么您一定會抱怨嵌套結構、甚至有時候你會進入嵌套地獄，在代碼中間添加或刪除小部件有多難，或者找到一個小部件在哪里結束而另一個小部件從哪里開始都是比較困難的。然后，您花了一整天的時間將左括號與其右括號匹配，其實你并不孤單，我之前也是這樣過來的，但是隨著時間的推移，我也花了一些時間來找出捷徑，所以從此以后你不在進入嵌套地獄了，因為堅果前端公眾號就是為您服務而創建的；我整理了下面的這些這些快捷方式允許你在 Flutter 中進行更快、更流暢的開發。

附注。所有這些快捷方式都適用于 Windows 中的 Android Studio 和 IntelliJ。

創建一個新的無狀態或有狀態小部件

你猜怎么著？您不必手動編寫小部件類并覆蓋構建函數。IDE 可以為您做到！

只需鍵入stless即可創建一個無狀態小部件，如下所示：

或者stful創建有狀態的小部件：

如果您已經創建了一個Stateless Widget并添加了很多子項，但后來意識到您State需要再創建一個，該怎么辦？您是否應該創建一個新的StatefulWidget然后手動將所有代碼轉移到它？其實不用。

您只需將光標放在 上StatelessWidget，按Alt + Enter或Option + Return并單擊Convert to StatefulWidget。將自動為您創建所有樣板代碼。

你可以用 Alt+Enter 做更多神奇的事情 | Option+Return

哈姆雷特看過沒，你是不是想要一個魔杖，這個就是您在 Flutter 中加快開發速度的魔杖。您可以單擊任何一個widget，按Alt + Enter或Option+Return并查看您對該特定選項有哪些選項widget。

在小部件周圍添加填充

假設您有一個不是Container,的組件，因此它沒有padding屬性。您想提供一些填充，但又害怕弄亂您的小部件結構。使用我們的魔杖，您可以添加您的Padding東西而不會弄亂任何東西：

只需點擊需要填充的小部件上的神奇命令（基于您的操作系統），然后單擊Add Padding現在您可以將默認填充修改為您想要的任何內容。

將小部件居中

這不是什么太特別的事情。它只是將您的小部件集中在可用空間中。當然這在列或行內不起作用。

用Container、Column、Row 或任何其他小部件包裝

您可以使用相同的方法用Container. 所以現在，newContainer成為您的 Widget 的父級。

或者，您甚至可以通過單擊Column或Row來包裝多個小部件！

或者用任何其他小部件包裝它們：

StreamBuilder如果您擁有最新版本的 Flutter 插件，您甚至可以用 StreamBuilderr包裝它們。

不喜歡當前的小部件？用就魔術棒取下它。

是的，刪除小部件就像添加新小部件一樣簡單。

輕松復制粘貼或剪切粘貼一行代碼

您可以輕松地剪切/復制一行代碼，只需將光標保持在該行的任意位置，然后像往常一樣按下Ctrl+X或Ctrl+C并粘貼它 ( Ctrl+V)?；蛘邔τ?iOS，同樣可以使用Command+X, Command+C&Command+V

Ctrl+X

Ctrl+C

查看小部件的源代碼

這是開源框架的最佳之處。如果您想知道一個驚人的小部件或類的幕后發生了什么，那么您只需將光標放在它上面并按Ctrl + B或Command+B。它將作為一個鏈接，將您直接帶到您的 Widget 的源代碼，您可以在其中閱讀有關它的所有內容。Flutter 還使用注釋來解釋它的許多代碼，從而形成了很好的文檔。

在不離開文件或選項卡的情況下檢查小部件的屬性

如果您想檢查您的小部件可以做什么而無需離開您的文件并深入研究文檔，只需按Ctrl+Shift+I或Option+SpaceBar快速查看小部件的構造函數。

快速選擇整個小部件

很多時候我們需要提取/刪除整個小部件，我們嘗試手動選擇它們：

如果它是一個非常大的小部件，那么弄清楚哪個右括號屬于哪個 Widget 可能會非常令人困惑，我們不想弄亂我們的整個結構。

在這種時候，我喜歡使用這個超級有用的快捷方式。

只需單擊要提取的小部件并按Ctrl+W。為您選擇了整個 Widget，而您的光標不會移動一英寸。

修復代碼結構

有時你的代碼只會一團糟。有點像這樣：

對于像我這樣對沒有適當縮進的代碼感到有點強迫癥的人來說，這可能是一場噩夢。

現在，大多數 IDE 都具有此功能（盡管可能不是相同的組合鍵）。只需按下Ctrl+Alt+L即可修復縮進并重新格式化代碼。

有沒有覺得非常的絲滑。

查看用戶界面的輪廓

我們的大多數 Widget 的樹中不僅僅只有一個孩子。他們有孩子的樹，有自己的孩子，還有更多。如果您的 Widget 的子級嵌套只有四層深，那么僅通過滾動瀏覽代碼就很難理解代碼的結構。謝天謝地，我們可以通過Flutter Outline來拯救我們！

您可以在 IDE 的最右側找到；Flutter Outline它是垂直選項卡之一，位于Flutter Inspector. 當你打開它時，它看起來是這樣的：

現在，您可以清楚地看到哪個 Widget 位于何處、它們在 UI 中的排列方式以及哪些小部件具有其他子小部件。十分簡單！

將代碼提取到方法中

Flutter Outline是一個非常有用的工具。你可以做 您所做的大多數事情都Alt + Enter,喜歡用 Column 包裹和將 Widget 居中，但在Flutter Outline選項卡下還有更多很棒的東西可用！其中之一是Extract Method按鈕。

這里的第四個按鈕

如果您覺得您正在編寫的 Widget 太長并且應該是一個自定義的 Widget，那么您無需手動將代碼轉換為方法，而是可以使用此工具為您創造奇跡！

上下移動小部件

使用Flutter Outline，你可以做的另一件瘋狂的事情就是，如果你在一個小部件中有多個孩子，你可以輕松地重新排列他們的順序：

您也可以通過按移動只是一個線向上或者向下Shift+Alt+Up/Down

重構重命名

這是一個非?；镜墓ぞ?，大多數 IDE 都有。這使您可以重命名方法、小部件、類或文件名，并確保對它的引用也被重命名。只需使用Shift + F6并輸入新名稱：

刪除未使用的導入

如果，您正在處理一個項目并導入了大量文件，但隨著時間的推移，您的代碼會得到越來越多的優化。最終，您可能不再需要大量這些導入?，F在您已準備好將代碼投入生產，但您需要對其進行清理并刪除所有未使用的導入。也許您通常手動刪除它們，但由于堅果在這里幫助你讓您的生活更輕松，這里有一個非常漂亮的鍵盤組合：Ctrl+Alt+O

我什么都不記得了

當然，有時侯你也會忘記這些捷徑，為此堅果為您準備了這個重要的魔法咒語。只需Ctrl+Shift+A輸入您需要的快捷方式。

這就是我現在知道的所有捷徑。請務必經?；貋聿榭锤嗵崾?、技巧和其他好東西！

我是堅果，這里是堅果前端小課堂。時刻歡迎你的到來。

Flutter

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。