Flutter — 加快開發速度的 IDE 快捷方式
上一個關于vscode 的插件推薦大家看的過瘾不,今天繼續給大家帶來一些關于android studio的開發小技巧
我是早起的年輕人-堅果
大家可以去微信公衆号搜“堅果前端”

接下來開始正文。
如果您是 Flutter 開發的新手,那麼您一定會抱怨嵌套結構、在代碼中間添加或删除小部件有多難,或者找到一個小部件在哪裡結束而另一個小部件從哪裡開始有多難。然後,您花了一整天的時間将左括号與其右括号比對,或者至少嘗試比對。你并不孤單,我們都去過那裡。我們花了一些時間來找出捷徑,但也許您不必經曆那些,因為我為您服務;我已經策劃了所有這些快捷方式,這些快捷方式允許在 Flutter 中進行更快、更流暢的開發。
建立一個新的無狀态或有狀态小部件
你猜怎麼着?您不必手動編寫小部件類并覆寫建構函數。IDE 可以為您做到!
隻需鍵入
stless
即可建立一個無狀态小部件,如下所示:
或者
stful
建立有狀态的小部件:
如果您已經建立了一個
Stateless Widget
并添加了很多子項,但後來意識到您
State
畢竟需要一個,該怎麼辦?您是否應該建立一個新的
StatefulWidget
然後手動将所有代碼轉移到它?你不必!
您隻需将光标放在 上
StatelessWidget
,按
Alt + Enter
或
Option + Return
并單擊
Convert to StatefulWidget
。将自動為您建立所有樣闆代碼。
夏天!
你可以用 Alt+Enter 做更多神奇的事情 | 選項+傳回
這是您在 Flutter 中加快開發速度的魔杖。您可以單擊任何一個
widget
,按
Alt + Enter
或
Option+Return
并檢視您對該特定選項有哪些選項
widget
。IE:
在小部件周圍添加填充
假設您有一個不是 a 的小部件,
Container,
是以它沒有
padding
屬性。您想提供一些填充,但又害怕弄亂您的小部件結構。使用我們的魔杖,您可以添加您的
Padding
東西而不會弄亂任何東西:
隻需點選需要填充的小部件上的神奇指令(基于您的作業系統),然後單擊
Add Padding
現在您可以将預設填充修改為您想要的任何内容。
将小部件居中
這不是什麼太特别的事情。它隻是将您的小部件集中在可用空間中。這在列或行内不起作用。
用Container、row、Column或任何其他小部件包裝
您可以使用相同的方法用
Container
. 是以現在,new
Container
成為您的 Widget 的父級。
或者,您甚至可以通過單擊
Column
或
Row
來包裝多個小部件!
或者用任何其他小部件包裝它們:
StreamBuilder
如果您擁有最新版本的 Flutter 插件,您甚至可以用container包裝它們。
不喜歡小部件?用魔術棒取下它。
是的,删除小部件就像添加新小部件一樣簡單。
輕松複制粘貼或剪切粘貼一行代碼
您可以輕松地剪切/複制一行代碼,隻需将光标保持在該行的任意位置,然後像往常一樣按下
Ctrl+X
或
Ctrl+C
并粘貼它 (
Ctrl+V
)。或者對于 iOS,同樣可以使用
Command+X
,
Command+C
&
Command+V
Ctrl+X
Ctrl+C
檢視小部件的源代碼
這是開源架構的最佳之處。如果您想知道一個驚人的小部件或類的幕後發生了什麼,那麼您隻需将光标放在它上面并按
Ctrl + B
或
Command+B
。它将作為一個連結,将您直接帶到您的 Widget 的源代碼,您可以在其中閱讀有關它的所有内容。Flutter 還使用注釋來解釋它的許多代碼,進而形成了很好的文檔。
在不離開檔案或頁籤的情況下檢查小部件的屬性
如果您想檢查您的小部件可以做什麼而無需離開您的檔案并深入研究文檔,隻需按
Ctrl+Shift+I
或
Option+SpaceBar
快速檢視小部件的構造函數。
快速選擇整個小部件
很多時候我們需要提取/删除整個小部件,我們嘗試手動選擇它們:
如果它是一個非常大的小部件,那麼弄清楚哪個右括号屬于哪個 Widget 可能會非常令人困惑,我們不想弄亂我們的整個結構。
在這種時候,我喜歡使用這個超級有用的快捷方式。
隻需單擊要提取的小部件并按
Ctrl+W
。為您選擇了整個 Widget,而您的光标不會移動一英寸。
修複代碼結構
有時你的代碼隻會一團糟。有點像這樣:
對于像我這樣對沒有适當縮進的代碼感到有點強迫症的人來說,這可能是一場噩夢。
現在,大多數 IDE 都具有此功能(盡管可能不是相同的組合鍵)。隻需按下
Ctrl+Alt+L
即可修複縮進并重新格式化代碼。
檢視使用者界面的輪廓
我們的大多數 Widget 的樹中都沒有隻有一個孩子。他們有孩子的樹,有自己的孩子,還有更多。如果您的 Widget 的子級嵌套隻有四層深,那麼僅通過滾動浏覽代碼就很難了解代碼的結構。謝天謝地,我們必須
Flutter Outline
來拯救我們!
您可以
Flutter Outline
在 IDE 的最右側找到;它是垂直頁籤之一,位于
Flutter Inspector
. 當你打開它時,它看起來是這樣的:
現在,您可以清楚地看到哪個 Widget 位于何處、它們在 UI 中的排列方式以及哪些小部件具有其他子小部件。十分簡單!
将代碼提取到方法中
Flutter Outline
是一個非常有用的工具。你可以做 您所做的大多數事情都
Alt + Enter,
喜歡用 Column 包裹和将 Widget 居中,但在
Flutter Outline
頁籤下還有更多很棒的東西可用!其中之一是
Extract Method
按鈕。
這裡的第四個按鈕
如果您覺得您正在編寫的 Widget 太長并且應該是一個自定義的 Widget,那麼您無需手動将代碼轉換為方法,而是可以使用此工具為您創造奇迹!
上下移動小部件
你可以做的另一件瘋狂的事情
Flutter Outline
是,如果你在一個小部件中有多個孩子,你可以輕松地重新排列他們的順序:
您也可以通過按移動隻是一個線向上或者向下
Shift+Alt+Up
/
Down
重構重命名
這是一個非常基本的工具,大多數 IDE 都有。這使您可以重命名方法、小部件、類或檔案名,并確定對它的引用也被重命名。隻需使用
Shift + F6
并輸入新名稱:
删除未使用的導入
是以,您正在處理一個項目并導入了大量檔案,但随着時間的推移,您的代碼會得到越來越多的優化。最終,您可能不再需要大量這些導入。現在您已準備好将代碼投入生産,但您需要對其進行清理并删除所有未使用的導入。也許您通常手動删除它們,但由于我在這裡讓您的生活更輕松,這裡有一個非常漂亮的鍵盤組合:
Ctrl+Alt+O
堅果,我什麼都不記得了
在這裡,有時會忘記自己的捷徑的人,我也為您準備了這個重要的魔法咒語。隻需
Ctrl+Shift+A
輸入您需要的快捷方式。