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】:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章