介紹
如果您是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。