Flutter —快速開發的IDE快捷方式

老孟導讀：這是老孟翻譯的精品文章，文章全部權歸原做者全部。

歡迎加入老孟Flutter交流羣，每週翻譯2-3篇付費文章，精彩不容錯過。

原文地址：https://medium.com/flutter-community/flutter-ide-shortcuts-for-faster-development-2ef45c51085b

若是您是一個 Flutter 初學者，那麼您必定厭惡嵌套結構，在代碼中添加或刪除一個小部件，或者找到一個小部件在何處結束、何處開始是多麼困難。 而後，您須要花費一成天的時間來匹配左括號與右括號。 但您並不孤單，由於咱們都是這麼走過來的。 咱們花了一些時間來找出捷徑，也許您沒必要再找出這些捷徑，由於我已經作了這些； 而且我整理了全部這些捷徑，這些捷徑能夠在Flutter中更快，更流暢地進行開發。

PS。全部這些快捷方式均適用於Windows中的Android Studio和IntelliJ。您來自iOS嗎？也許這篇文章會有所幫助。

建立一個新的Stateless or Stateful組件

你猜怎麼了？您沒必要手動編寫窗口小部件類並覆蓋構建功能。 IDE能夠爲您作到！

只需輸入stless便可建立一個無狀態小部件，以下所示：

或輸入stful建立有狀態的小部件：

若是您已經建立了一個無狀態小部件並添加了許多子級，可是卻意識到您最終將須要一個State怎麼辦？您是否應該製做一個新的StatefulWidget，而後手動將全部代碼轉移到該代碼上？不用了！

您能夠將光標放在StatelessWidget上，按Alt + Enter並單擊Convert to StatefulWidget。將自動爲您建立全部樣板代碼。

使用Alt + Enter能夠執行更多神奇的事情

Alt + Enter是用於在Flutter中加快開發速度的魔杖。您能夠單擊任何窗口小部件，按Alt + Enter並查看該特定窗口小部件具備哪些選項。

給組件添加Padding

假設您有一個不是容器的窗口小部件，所以它沒有padding屬性。您想填充一些內容，但擔憂會弄亂您的小部件結構。使用咱們的魔術棒，您能夠添加填充而不會弄亂任何東西：

只需在須要填充的小部件上按Alt + Enter，而後單擊「add padding」便可。如今您能夠將默認填充修改成所需的填充。

Center 組件

這沒什麼特別的。它只是將小部件放在可用空間的中心。這在列或行內不起做用。

Wrap with a Container, Column, Row or any other Widget

您可使用相同的方法用Container包裝小部件。所以，如今，newContainer成爲您的小部件的父級。

或者，您甚至能夠單擊一下就能夠用「列」或「行」包裝多個小部件！

或使用其餘任何小部件包裝它們：

你甚至使用 StreamBuilder 包裹子組件：

不喜歡一個組件？刪除它

是的，刪除小部件就像添加一個新部件同樣容易。

輕鬆複製粘貼或剪切粘貼一行代碼

您能夠輕鬆地剪切/複製一行代碼，只需將光標保持在該行的末尾，而後按Ctrl + X或Ctrl + C的方式粘貼並像一般同樣粘貼（Ctrl + V）

Ctrl+X

Ctrl + C

查看小部件的源代碼

那是關於開源框架的最好的事情。 若是您想知道使人驚歎的小部件或類的幕後狀況，只需將光標放在其上，而後按Ctrl + B便可。 該連接將充當連接，直接帶您Widget的源代碼，您能夠在其中閱讀有關它的全部內容。 Flutter還使用註釋來解釋其許多代碼，從而提供了很好的文檔。

在不離開文件或標籤的狀況下檢查小部件的屬性

快速選擇整個小部件

不少時候，咱們須要提取/刪除整個小部件，而後嘗試手動選擇它們：

若是它是一個很是大的窗口小部件，那麼弄清楚哪一個窗口小括號屬於哪一個窗口小部件可能會形成混亂，而且咱們不想弄亂咱們的整個結構。

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

只需單擊要提取的小部件，而後按Ctrl + W。爲您選擇了整個小部件，而您的光標沒有移動一英寸。

格式化代碼

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

對於像我這樣的人來講，有些OCD會查看沒有適當縮進的代碼，這多是一場噩夢。

如今，大多數IDE都具備此功能（儘管可能不是相同的組合鍵）。只需按Ctrl + Alt + L便可修復縮進並從新格式化代碼。

查看您的UI大綱

咱們的大多數小部件的樹上只有一個孩子。他們有本身的孩子的樹木，還有更多的孩子。若是您的Widget的子級嵌套少至4個深度，那麼僅經過滾動瀏覽就很難理解代碼的結構。幸運的是，咱們有Flutter Outline來拯救咱們！

您能夠在IDE的最右側找到Flutter Outline；它是垂直標籤之一，位於Flutter Inspector上方。當您打開它時，它看起來像這樣：

如今，您能夠清楚地看到哪一個窗口小部件，它們在用戶界面中的排列方式以及哪些窗口小部件具備其餘子窗口小部件。十分簡單！

將代碼提取到方法中

Flutter Outline是一個很是有用的工具。您可使用Alt + Enter完成大多數操做，例如用Column包裝和將Widget居中，可是Flutter Outline選項卡下還有更多很棒的功能！其中之一是「提取方法」按鈕。

若是您以爲編寫的小部件太長了，可能應該是自定義小部件，那麼沒必要手動將代碼轉換爲方法，您可使用此工具爲您作魔術！

上下移動小部件

Flutter Outline能夠作的另外一瘋狂的事情是，若是一個小部件中有多個子代，則能夠輕鬆地從新排列它們的順序：

您也能夠經過按Shift + Alt +向上/向下鍵僅向上或向下移動一行

重構重命名

這是大多數IDE都具有的很是基本的工具。這使您能夠重命名方法，小部件，類或文件名，並確保也重命名了對該方法的引用。只需使用Shift + F6並輸入新名稱便可：

刪除未使用的導入

所以，您正在從事一個項目，而且導入了許多文件，可是隨着時間的流逝，您的代碼愈來愈獲得優化。最終，您可能再也不須要大量這些進口。如今您能夠將代碼推入生產環境，可是您須要清理它並刪除全部那些未使用的導入。也許您一般是手動刪除它們，但因爲我是爲了簡化您的生活，所以這裏有一個很是漂亮的鍵盤組合：Ctrl + Alt + O

我什麼都不記得了

若是您像這裏的Filip Hracek同樣有時會忘記他的快捷方式，咱們將爲您提供這一重要的魔術。只需按Ctrl + Shift + A並鍵入所需的快捷方式。

這就是我目前所知道的全部快捷方式。請務必常常回來查看更多提示，技巧和其餘好東西！

我是否錯過了神話般的快捷方式？在下面發表評論！

個人文章是免費的，可是您知道您能夠按clap👏按鈕50次嗎？你走得越高，就越激勵我爲你寫更多的東西！

交流

老孟Flutter博客地址（330個控件用法）：http://laomengit.com

歡迎加入Flutter交流羣（微信：laomengit）、關注公衆號【老孟Flutter】：