AS 使用 Flutter 代码模板

AS 使用 Flutter 代码模板

Android Studio 原本是用来开发 Android 的 IDE，经过安装 Flutter 和 Dart 两款插件就可使用 Android Studio 来进行 Flutter 应用程序开发了。

可是有一点不方便的就是，新建的 dart 文件，里面没有任何代码，所有都要本身写，有一些重复的代码好比 StatefulWidget 这样的模板，咱们但愿工具可以自动生成，来简化咱们的开发。AS 上有代码模板的功能，咱们能够经过新建 dart 的代码模板来完成自动生成代码的功能。

不管是 Mac 仍是 Windows ，均可以经过在 Setting 里面搜索 Templates 找到这个设置。

Flutter 的代码模板是经过 Velocity 模板引擎 来实现的，更详细的资料能够参考这里。

1、StatelessWidget 代码模板

在 File and Code Templates 里，选择 Files 一栏，点击左上角加号，新建名字是 StatelessWidget ，扩展名为 dart 的代码模板。

模板以下

import 'package:flutter/material.dart';
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
   #set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
class ${class} extends StatelessWidget {
  ${class}({Key key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue);
  }
}
复制代码

2、StatefulWidet 代码模板

import 'package:flutter/material.dart';
#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
   #set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
class ${class} extends StatefulWidget {
  ${class}({Key key}) : super(key: key);
@override
  _${class}State createState() => _${class}State();
}
class _${class}State extends State<${class}> {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.blue);
  }
}
复制代码

3、Mixin 代码模板

#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
   #set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
mixin ${class} {
}

复制代码

4、Extension 代码模板

#set( $items = $NAME.split("_") )
#set( $class = "" )
#set( $item = "" )
#foreach($item in $items)
   #set( $class = $class + $item.substring(0,1).toUpperCase() + $item.substring(1).toLowerCase() )
#end
extension ${class} on ${on} {
}
复制代码

5、使用

新建文件的时候，就可使用刚才新建的代码模板了。

好比新建一个名字为 TestTemplate 使用 StatefulWidget 模板的文件，最终生成的文件里面自动生成的代码以下

class Testtemplate extends StatefulWidget {
 Testtemplate({Key key}) : super(key: key);

 @override
 _TesttemplateState createState() => _TesttemplateState();
}

class _TesttemplateState extends State<Testtemplate> {
 @override
 Widget build(BuildContext context) {
   return Container(color: Colors.blue);
 }
}

复制代码

github

欢迎关注「Flutter 编程开发」微信公众号 。