老孟導讀:這是老孟翻譯的精品文章,文章所有權歸原作者所有。
歡迎加入老孟Flutter交流群,每週翻譯2-3篇付費文章,精彩不容錯過。
如果您是一個 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個控制元件用法):laomengit.com
歡迎加入Flutter交流群(微信:laomengit)、關注公眾號【老孟Flutter】: