Flutter開發中經常使用的快捷鍵

介紹

若是您是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。

原文連接

本文是在原文的基礎上簡單翻譯了一下，並作了一些簡單的修改。

原文連接：medium.com/flutter-com…

最後，歡迎你們關注個人公衆號，會推送關於Flutter和Android學習的一些文章