Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文

AWeiLoveAndroid發表於2019-03-04

版權宣告:本文為博主原創文章,未經博主允許不得轉載。 juejin.im/post/5b6408…

轉載請標明出處:juejin.im/post/5b6408… 本文出自 AWeiLoveAndroid的部落格

使用Flutter開發的朋友們都有一個疑問,自帶的快捷提示不是很豐富,沒有你想要的功能,不管是Android Studio 還是IDEA,鬥狠有侷限性,有的朋友可能在用VSCode,那個外掛有兩個,我都試過都不好用,擴充套件性不好。於是我自己就寫了一些常用Flutter程式碼模板,匯入AS或者IDEA可以直接使用。

【說明】本文同步釋出在github,歡迎star,github.com/AweiLoveAnd…


一、使用說明

  • 1.不要對settings.jar檔案進行任何修改,如果改壞了匯入不進去或者匯入之後無法正常使用,請重新下載settings.jar就可以了。
  • 2.匯入之後,如果發現快捷鍵無法正常使用,請看看你的AS或者IDEA的程式碼提示匹配設定是否正常。

設定模糊匹配的步驟:

點選選單欄File --> Settings --> Editor --> General --> Code Completion --> 在 Case sensitive completion 後面的選項改成NONE:進行模糊匹配。(First Letter:根據首字母進行匹配)

如果是最新版的AS或者IDEA可能有變化,只需要把 Match cases 前面的對勾去掉就可以了。如下圖所示:

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文


二、匯入方式

(1)AS或者IDEA使用者的匯入

首先開啟github網址 github.com/AweiLoveAnd… 下載jar包。

然後,點選選單欄 File--> Import Settings,然後找到剛下載的那個Settings.jar,匯入即可。

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文

(2)VSCode使用者的匯入

對於VSCode使用者來說,請下載dart.json檔案,然後複製到C:\Users\Administrator\AppData\Roaming\Code\User\snippets目錄(Users是你電腦的使用者名稱)裡面即可,如已經存在,請替換就OK。


三、支援的快捷鍵如下:

快捷鍵 描述
con 建立完整的Container
cp 自定義CustomPainter
csv CustomScrollView + SliverPadding建立列表,子控制元件帶有邊距
csv2 使用CustomScrollView + SliverGrid建立列表
gv 建立GridView.count
lv 建立基本的ListView
lvb 建立ListView.builder
lvd 建立帶分割線的ListView
lvr 建立RadioListTile,可以單選的item
lvt 建立帶有各種ListTile的ListView
mainstf 建立 StatefulWidget 控制元件
mainstl 建立 StatelessWidget 控制元件
me 建立方法
mep 建立私有方法
row 建立Row
sb 建立SizedBox
ssv 建立SingleChildScrollView
stf 建立完整的StatefulWidget,包含生命週期相關方法。
stl 建立StatelessWidget
svc 建立CustomScrollView
te 建立一個標準的Text

四、部分使用示範圖(以AS做示範)

mainstf 建立 StatefulWidget 控制元件:

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文


mainstl 建立 StatelessWidget 控制元件:

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文


stf 建立完整的StatefulWidget,包含生命週期相關方法。:

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文


stl 建立StatelessWidget:

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文


gv 建立 GridView.count:

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文


lv 建立基本的ListView:

Flutter程式碼模板,解放雙手,提高開發效率必備| 掘金技術徵文


con 建立完整的Container:

con建立完整的Container


五、關於程式碼模板的使用和自定義方式可以看我的github Android Studio常用模板用法和自定義模板

相關文章