Flutter代码模板插件,解放双手,提高开发效率必备

前言   使用Flutter开发的朋友们都有一个疑问,开发工具自带的快捷提示不是很丰富,没有你想要的功能,不管是AS还是IDEA都很有局限性,有的朋友可能在用VSCode,那个插件更不用说了,插件少得可怜,我都试用过功能也很少,都不太好用,扩展性也不好,也不好修改。于是我自己就写了一些常用Flutter代码模板,导入AS或者IDEA可以直接使用,同时针对VSCode我也做了一份代码模板,方便使用VSCode的朋友们进行Flutter开发。

1

AS或者IDEA的模板创建和使用

一、创建模板 创建模板步骤是差不多的,不同语法可能有不同的使用方式,但是基本步骤差核心不变。我这里创建AS模板用的是以前做的一系列图解,用的是Java语言示范的,其实并不影响使用的,你只需要在下方的Define那里选择Dart语言,然后编辑区使用Dart的语言去编辑就行了,掌握一个语言的使用,其它的都差不多的。

(1)打开Live Templates(在线模板)

点击菜单File  --> 点击Settings  --> 选择Editor  --> Code Style  --> Live Templates,这里面配置了常用代码,比如log,for循环等。

(2)点击右边的“+” 加号,选择 Template Group,创建一个组,输入一个组名,点OK,如下图所示:

(3)找到刚创建的组,点击右边的“+” 加号,选择 Live Template,创建一个模板,比如我这里叫做custom,如下图所示:

建好之后是这样的:

(4)Abbreviation后面的输入框输入一个快捷键名称,Description后面的输入框输入描述,如下图所示:

**

**

(5)点击下方的Define,勾选java前面的复选框,如下图所示:

【注意】由于时间关系,我这里是用的Java语言做示范的(这是之前我做的一套示例图解,很珍贵的,花了好几天做的,好好珍藏吧。) 其实不管是什么语言,用法差不多的。我们可以在下方的Define那里选择Dart语言,然后编辑区使用Dart的语法去编辑就行了,掌握一个语言的使用,其它的都差不多的。希望大家多多谅解。具体的源码可以在文末的链接去下载,导入到你的AS之后,就会看到完整的配置了。

我们把它展开之后是这样的:

(6)Template text 输入自定义模板的代码内容,如下图所示:

(7)点击右边的Edit variables,编辑指定的变量名,如下图所示:

二、使用模板 输入快捷键回车就可以了,比如刚才定义了一个switch的快捷键名称,我们只需要输入switch回车,然后刚才编辑的代码块就会自动输出了。   

 

三、导入模板 如果你嫌麻烦不想自己创建模板,那么你可以使用我给你准备好的模板,直接导入到你的AS或者IDEA就可以了。

模板地址:

https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/code_plugins/

(一)导入步骤:

打开AS或者IDEA,点击菜单栏File --> Import Settings,如下图,然后选择刚才下载的jar包,就可以导入了。

(二)支持的快捷键

快捷键描述
con创建完整的Container
cp自定义CustomPainter
csvCustomScrollView + 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

(三)部分使用示范图

mainstf 创建 StatefulWidget 控件:

mainstl 创建 StatelessWidget 控件:

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

stl 创建StatelessWidget:

gv 创建 GridView.count:

lv 创建基本的ListView:

con 创建完整的Container:

2

VSCode模板的创建和使用

有一些朋友喜欢用VSCode这个轻量级的开发工具,但是VSCode插件库提供的那几个插件功能有太少,不方便去拓展,所以就需要自己去手动添加快捷键,这里我就详细的讲解一下VSCode如何创建模板以及如何使用模板。由于时间有限,我这里列举的只是一部分常用的,如果你有更多好玩的模板,欢迎提供给我,感谢大家支持。

一、创建模板

VSCode的代码配置比较麻烦,按下快捷键Ctrl + Shift + P,然后输入 configure, 然后选择配置用户代码片段,然后输入dart,选择dart,回车就会出现一个dart.json配置文件(该配置文件默认目录在C:\Users\你的用户名\AppData\Roaming\Code\User\snippets\dart.json)。如果大家看不清楚,我这里有一张操作示意GIF图,大家可能就看得更清楚一些:

下面就开始教大家如何配置了(重点,做好笔记了):

我们看一下规则,模板配置由三部分组成:

先写一个{},这里面存放我们定义的模板内容。

 字段prefix,表示我们要输入的快捷键。

 body开头的[],里面存放的是我们自定义的模板代码。

 字段description,表示快捷键的功能描述。

我们可以使用$加上数字表示输入光标的占位顺序,例如下面示例中的$1,只有一个内容需要输入的,光标就停在这里。

现在我们来看一个自动创建build方法模板示例:

"创建Build()方法": {
    "prefix": "bu",
    "body": [
        "@override",
        "Widget build(BuildContext context) {",
        "    return $1;",
        "}",
    ],
    "description": "创建Build()方法"
},

二、使用模板 使用方式:输入快捷键回车就可以了,比如上面的例子中,输入bu,回车就可以看到自动生成build方法了,如下图所示:

三、导入模板 下载文末的github链接里面的dart.json文件,复制到你电脑的

C:\Users\用户名\AppData\Roaming\Code\User\snippets

目录,如果已经存在该文件,请复制过去替换掉该文件。

本文里面所讲到的代码模板的源码发布在我的Github,地址是: 

https://github.com/AweiLoveAndroid/Flutter-learning/blob/master/code_plugins/

如果你是AS或者IDEA用户,请下载settings.jar,导入到AS或IDEA即可。

如果你是VSCode用户,请下载dart.json并复制到你电脑的C:\Users\用户名

\AppData\Roaming\Code\User\snippets

目录,如果已经存在该文件,请复制过去替换掉该文件。


本文版权归扣丁书屋所有,转载请保留此说明。



所属标签

无标签

官方入门指南

Flutter官方发布的入门指导,包括了如何在不同的平台(Windows, Mac, Linux)上搭建开发环境,以及一些入门级的指导,以便您从零开始进入Flutter的世界,同时,一些Flutter的框架API,也是您开发时必不可少的工具书。

从这里进入