首页 Flutter正文

Flutter使用代码模板解放双手提高开发效率必备

yuange Flutter 2019-07-11 1539 0 Flutter

一、使用说明

(1)不要对settings.jar文件进行任何修改,如果改坏了导入不进去或者导入之后无法正常使用,请重新下载settings.jar就可以了。

(2)导入之后,如果发现快捷键无法正常使用,请看看你的AS或者IDEA的代码提示匹配设置是否正常。

  • 设置模糊匹配的步骤:

Windows平台:

  • 旧版本AS:

File --> Settings --> Editor --> General --> Code Completion --> 在 Case sensitive completion 后面的选项改成NONE:进行模糊匹配。(First Letter:根据首字母进行匹配)

如下图所示:

  • 新版本AS:

点击菜单栏File --> Settings --> Editor --> General --> Code Completion --> 只需要把 Match cases 前面的对勾去掉就可以了。(First letter only 意思是:首字母匹配。All letters 意思是:按所有字母适配。)

如下图所示:

Mac上面的操作:

点击Android Studio -> Preferences -> Code Completion -> 然后在 Case sensitive completion 后面的选项改成None,进行模糊匹配。

打开设置菜单

设置成None


二、导入方式

(1)AS或者IDEA用户的导入

Windows的导入:

首先打开github网址 https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/code_plugins/ 下载jar包。这个jar包只是一个模板配置而已,随便放一个英文的路径下面都行。

然后,点击菜单栏 File--> Import Settings,然后找到刚下载的那个Settings.jar,导入。

然后选择Live templates以及Live templates(schemes),点击OK即可。

Mac的导入:

点击菜单栏 File--> Import Settings,然后找到刚下载的那个Settings.jar,导入。

然后选择Live templates以及Live templates(schemes),点击OK即可。

(2)VSCode用户的导入

Windows的导入:

  • 对于VSCode用户来说,请下载dart.json文件,然后复制到C:\Users\Administrator\AppData\Roaming\Code\User\snippets目录(Users是你电脑的用户名)里面即可,如已经存在,请替换就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内容复制到这里面,保存即可。最终效果如下图所示:


Mac的导入:

  • 请下载dart.json文件,然后复制到/Library/Application Support/Code/User/snippets/目录(Users是你电脑的用户名)里面即可,如已经存在,请替换就OK,Mac用户注意了:这个路径貌似所需要权限。

有人问:你是怎么知道是这个路径的?其实很简单:
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内容复制到这里面,保存即可。最终效果和winows是一样的,就不截图了。


三、支持的快捷键如下:

快捷键描述
bab创建AnimatedBuilder
bu创建Build()方法
bufb创建FutureBuilder
bulb创建LayoutBuilder
buob创建OrientationBuilder
bustf创建StatefulBuilder
bustr创建StreamBuilder
cc创建CustomClipper
cen创建Center
col创建Column
con创建完整的Container
cp自定义CustomPainter
csvCustomScrollView + SliverPadding创建列表,子控件带有边距
csv2使用CustomScrollView + SliverGrid创建列表
gv创建GridView.count
inh创建Inherited
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
stanim创建Stateful(带有 AnimationController)
stf创建完整的StatefulWidget,包含生命周期相关方法。
stl创建StatelessWidget
svc创建CustomScrollView
te创建一个标准的Text

四、部分使用示范图(以AS做示范)

mainstf 创建 StatefulWidget 控件:


mainstl 创建 StatelessWidget 控件:


stf 创建完整的StatefulWidget,包含生命周期相关方法。:


stl 创建StatelessWidget:


gv 创建 GridView.count:


lv 创建基本的ListView:


con 创建完整的Container:

con创建完整的Container


五、关于代码模板的自定义方式

Dart模板基本组成部分

image.png

Dart编辑模板字段

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


评论

在线客服-可直接交谈

您好!有什么需要可以为您服务吗?