介紹
如果您是Flutter開發的新手,那麼我們會對這巢狀結構挺煩的,比如我們要從程式碼中間新增或者刪除一個widget是很麻煩的,要找到一個widget相關程式碼的開始位置和結束位置,是比較麻煩的。
下面利用一些快捷鍵,來提高Flutter的開發效率。
建立新的StatelessWidget或者StatefulWidget
我們不必手動去編寫繼承StatelessWidget或者StatefulWidget並重寫build()方法。IDE已經提供了相應的快捷鍵。
只需要輸出stless就可以建立一個StatelessWidget。

或者輸入stful建立一個StatefulWidget。

如果一開始我們建立了一個StatelessWidget,但是後來我們想把它改為一個StatefulWidget的話,我們會新建一個State類,並修改之前StatelessWidget的相關程式碼。
其實可以不必要這樣做,我們只需要將游標StatelessWidget的地方,按住Alt + Enter(在mac中是option + Enter),然後單擊Convert to StatefulWidget,將自動為你建立所有的樣板程式碼。
使用Alt + Enter可以做更多的事情
Alt + Enter(在mac vscode裡 Alt + Enter 是 option + .)是用於Flutter開發中經常要用到的的快捷鍵。可以單擊任何一個widget,然後按Alt + Enter,就可以檢視對該widget進行特定的操作。
給widget新增padding
只需要按下Alt + Enter,單擊Add Padding就可以給widget的外面加上一層Padding,並且不會弄亂你之前的程式碼結構。

設定widget居中
只需要按下Alt + Enter,單擊Center Widget就可以給widget的外面加上一層Center的小部件,使widget居中。

將widget放到Container中
只需要按下Alt + Enter,單擊Wrap with Container就可以給widget的外面加上一層Container。

將多個widget放到Row,Column中
只需要按下Alt + Enter,單擊Wrap with Column或者Row就可以一次性將多個widget放置到Row或者Column中。

將widget放到任意的小部件中
只需要按下Alt + Enter,單擊Wrap with a new widget就可以將widget放到任意的小部件中。

移除widget
只需要按下Alt + Enter,單擊Remove Widget就可以將當前的widget進行刪除。

快速選擇整個小部件
當我們需要提取或者刪除整個小部件的時候,一般情況下,我們需要找到整個widget的相關程式碼的開始位置和結束位置,然後再進行操作。

但是如果整個widget的程式碼行數非常多,那麼要自己找出相關的程式碼,那就會很麻煩。
所以在整個時候,我們需要快捷鍵Ctrl + W。可以無需移動游標,就可以幫我們選擇出整個widget的相關程式碼。 對應的keymap 是Select successively increasing code blocks:Ctrl + W(Windows)或 Option + Up(Mac)

格式化程式碼
大多數的IDE都具有格式化程式碼的功能。我們只需要按下Ctrl+Alt+L就可以格式化程式碼,並且修復縮排不對齊的問題。

使用Flutter Outline
如果只是通過看程式碼,來看widget之間的巢狀情況,可能需要不斷滾動程式碼,並且也很難理解程式碼的結構。這個時候,我們需要使用到Flutter Outline。
Flutter Outline可以在IDE的最右側找到,位於Flutter Inspector的正上方。開啟Flutter Outline,顯示的情況是這樣的:

現在,我們可以清楚地看到所有的小部件,在UI中的排列情況,也可以看出小部件的巢狀情況。
將相關的程式碼提取成一個方法
Flutter Outline是一個非常有用的工具。Alt + Enter快捷鍵可以做的事情,大部分也可以在 Flutter Outline上進行操作,不過還是Alt + Enter能夠實現的功能,還是儘量用Alt + Enter就行,比較快。
但是Flutter Outline還有更多的功能,比如Extract Method。當我們編寫來一個Widget,並且程式碼行數比較長,那可以考慮將這個widget相關的程式碼,提取到一個方法中。這個操作可以利用Extract Method來快速完成,不需要你手動將程式碼轉移到一個方法中

上下移動小部件
如果在一個widget中有多個孩子widget,那麼我們可以使用Flutter Outline,來重新排序這些孩子widget的順序。

重新命名
重新命名方法,重新命名widget,重新命名類或者檔名,只需要使用Shift + F6 就可以輸入新名稱了。

刪除未使用的import
如果我們正在開發一個專案,並匯入了大量檔案,但是到最後,有些檔案其實是沒有被使用到的,所以我們是不需要這些多餘的匯入的。直接使用Ctrl+Alt+O,就可以代替手動刪除了所有未使用的import。

原文連結
本文是在原文的基礎上簡單翻譯了一下,並做了一些簡單的修改。
最後,歡迎大家關注我的公眾號,會推送關於Flutter和Android學習的一些文章
