Flutter基礎(chǔ)篇（5）-- Flutter代碼模板，解放雙手，提高開發(fā)效率必備

版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。http://www.lxweimin.com/p/4184745d6983
轉(zhuǎn)載請標(biāo)明出處：http://www.lxweimin.com/p/4184745d6983
本文出自 AWeiLoveAndroid的博客

Flutter系列博文鏈接 ↓：

工具安裝：

Flutter基礎(chǔ)篇：

Flutter進階篇：

Dart語法系列博文鏈接 ↓：

Dart語法基礎(chǔ)篇：

Dart語法進階篇：

使用Flutter開發(fā)的朋友們都有一個疑問，自帶的快捷提示不是很豐富，沒有你想要的功能，不管是Android Studio 還是IDEA，斗狠有局限性，有的朋友可能在用VSCode，那個插件有兩個，我都試過都不好用，擴展性不好。于是我自己就寫了一些常用Flutter代碼模板，導(dǎo)入AS或者IDEA可以直接使用。

【說明】本文同步發(fā)布在github，歡迎star，https://github.com/AweiLoveAndroid/Flutter-learning

Flutter系列博文鏈接 ↓：

工具安裝：

Flutter基礎(chǔ)篇：

Flutter進階篇：

Dart語法系列博文鏈接 ↓：

一、使用說明

（1）不要對settings.jar文件進行任何修改,如果改壞了導(dǎo)入不進去或者導(dǎo)入之后無法正常使用，請重新下載settings.jar就可以了。
（2）導(dǎo)入之后，如果發(fā)現(xiàn)快捷鍵無法正常使用，請看看你的AS或者IDEA的代碼提示匹配設(shè)置是否正常。
  • 設(shè)置模糊匹配的步驟：

Windows平臺：

  • 舊版本AS：

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

如下圖所示：

  • 新版本AS：

點擊菜單欄File --> Settings --> Editor --> General --> Code Completion --> 只需要把 Match cases 前面的對勾去掉就可以了。（First letter only 意思是：首字母匹配。All letters 意思是：按所有字母適配。）

如下圖所示：

Mac上面的操作：

點擊Android Studio -> Preferences -> Code Completion -> 然后在 Case sensitive completion 后面的選項改成None，進行模糊匹配。

打開設(shè)置菜單
設(shè)置成None

二、導(dǎo)入方式

（1）AS或者IDEA用戶的導(dǎo)入

Windows的導(dǎo)入：

首先打開github網(wǎng)址 https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/code_plugins/ 找到對應(yīng)文件下載settings.jar文件。這個jar包只是一個模板配置而已，下載的時候隨便放一個英文的路徑下面存儲都行。

然后，點擊菜單欄 File--> Import Settings，然后找到剛下載的那個settings.jar，導(dǎo)入。

然后選擇Live templates以及Live templates(schemes)，點擊OK即可。

Mac的導(dǎo)入：

點擊菜單欄 File--> Import Settings，然后找到剛下載的那個settings.jar，導(dǎo)入。

然后選擇Live templates以及Live templates(schemes)，點擊OK即可。

Tips: 如果你不喜歡 new關(guān)鍵字, 你可以下載 no_new_keywords/settings.jar 文件, 否則請下載 have_new_keywords/settings.jar 這個文件。

（2）VSCode用戶的導(dǎo)入

Windows的導(dǎo)入：

  • 對于VSCode用戶來說，請下載dart.json文件，然后復(fù)制到C:\Users\Administrator\AppData\Roaming\Code\User\snippets目錄（Users是你電腦的用戶名）里面即可，如已經(jīng)存在，請?zhí)鎿Q就OK。

有人問：你是怎么知道是這個路徑的？其實很簡單：
Ctrl+Shift+P（或查看-->命令面板） ==> 輸入preferences，選擇Preferences: Configure User Snippets（配置用戶代碼片段），然后選擇新建全局代碼片段文件，就會自動跳到dart.json所在的本地路徑。

  • 或者你想麻煩一點的話，也可以這么做：
    1.Ctrl+Shift+P（或查看-->命令面板）。

2.然后輸入preferences，選擇Preferences: Configure User Snippets（配置用戶代碼片段）。

3.然后輸入dart，選擇dart。

4.然后就會有一個dart.json文件出來了。

5.然后把我的Github庫里面的dart.json內(nèi)容復(fù)制到這里面，保存即可。最終效果如下圖所示：

Mac的導(dǎo)入：

  • 請下載dart.json文件，然后復(fù)制到/Library/Application Support/Code/User/snippets/目錄（Users是你電腦的用戶名）里面即可，如已經(jīng)存在，請?zhí)鎿Q就OK，Mac用戶注意了：這個路徑貌似所需要權(quán)限。

有人問：你是怎么知道是這個路徑的？其實很簡單：
Command（或 Cmd）+ Shift + P（或View-->Command Palette（命令面板）） ==> 輸入pref，選擇Preferences: Configure User Snippets（配置用戶代碼片段），然后選擇新建全局代碼片段文件，就會自動跳到dart.json所在的本地路徑。

  • 或者你想麻煩一點的話，也可以這么做：

1.Command（或 Cmd）+ Shift + P（或View-->Command Palette（命令面板））。

2.然后輸入pref就能看到很多候選項，選擇Preferences: Configure User Snippets（配置用戶代碼片段）。

3.然后輸入da，選擇dart。

4.然后就會有一個dart.json文件出來了。

5.然后把我的Github庫里面的dart.json內(nèi)容復(fù)制到這里面，保存即可。最終效果和winows是一樣的，就不截圖了。

Tips: 如果你不喜歡 new關(guān)鍵字, 你可以下載 no_new_keywords/dart.json 文件, 否則請下載 have_new_keywords/dart.json 這個文件。

三、支持的快捷鍵如下：

快捷鍵 描述
bab 創(chuàng)建AnimatedBuilder
bu 創(chuàng)建Build()方法
bufb 創(chuàng)建FutureBuilder
bulb 創(chuàng)建LayoutBuilder
buob 創(chuàng)建OrientationBuilder
bustf 創(chuàng)建StatefulBuilder
bustr 創(chuàng)建StreamBuilder
cc 創(chuàng)建CustomClipper
cen 創(chuàng)建Center
col 創(chuàng)建Column
con 創(chuàng)建完整的Container
cp 自定義CustomPainter
csv CustomScrollView + SliverPadding創(chuàng)建列表，子控件帶有邊距
csv2 使用CustomScrollView + SliverGrid創(chuàng)建列表
gv 創(chuàng)建GridView.count
inh 創(chuàng)建Inherited
lv 創(chuàng)建基本的ListView
lvb 創(chuàng)建ListView.builder
lvd 創(chuàng)建帶分割線的ListView
lvr 創(chuàng)建RadioListTile，可以單選的item
lvt 創(chuàng)建帶有各種ListTile的ListView
mainstf 創(chuàng)建 StatefulWidget 控件
mainstl 創(chuàng)建 StatelessWidget 控件
me 創(chuàng)建方法
mep 創(chuàng)建私有方法
row 創(chuàng)建Row
sb 創(chuàng)建SizedBox
ssv 創(chuàng)建SingleChildScrollView
stanim 創(chuàng)建Stateful（帶有 AnimationController）
stf 創(chuàng)建完整的StatefulWidget，包含生命周期相關(guān)方法。
stl 創(chuàng)建StatelessWidget
svc 創(chuàng)建CustomScrollView
te 創(chuàng)建一個標(biāo)準(zhǔn)的Text

四、部分使用示范圖（以AS做示范）

mainstf 創(chuàng)建 StatefulWidget 控件：

mainstl 創(chuàng)建 StatelessWidget 控件：

stf 創(chuàng)建完整的StatefulWidget，包含生命周期相關(guān)方法。：

stl 創(chuàng)建StatelessWidget：

gv 創(chuàng)建 GridView.count：

lv 創(chuàng)建基本的ListView：

con 創(chuàng)建完整的Container：

con創(chuàng)建完整的Container

五、關(guān)于代碼模板的自定義方式

Dart模板基本組成部分

image.png

Dart編輯模板字段

更多的自定義模板用法可以看我的Github： Android Studio常用模板用法和自定義模板

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。