AndroidStudio生成Flutter模板代码技巧详解

第AndroidStudio生成Flutter模板代码技巧详解目录正文快捷输入AS文件模板如何创建模板代码模板示例如何使用模板

正文

在开发Flutter时，常常需要创建新的页面或新的Widget，每次都重新手写总是很麻烦，这篇文章介绍一些减少手写样板代码的方式。

笔者使用的是AndroidStudio，所以这里的技巧都是在AS中使用的。

快捷输入

AndroidStudio的Flutter插件提供了一些在代码编辑区域的快捷输入，根据这些输入可以快速生成模板代码。最常用的快捷输入是stless和stful。

stless表示生成一个Stateless的Widget。

//|表示多行光标，可以输入类名

class|extendsStatelessWidget{

const|({Keykey}):super(key:key);

@override

Widgetbuild(BuildContextcontext){

returnContainer();

stful表示生成一个Stateful的Widget。

//|表示多行光标，可以输入类名

class|extendsStatefulWidget{

const|({Keykey}):super(key:key);

@override

_|StatecreateState()=_State();

class_|StateextendsState{

@override

Widgetbuild(BuildContextcontext){

returnContainer();

一个小缺点：不能自动生成import，需要额外手动importmaterial库。

AS文件模板

AndroidStudio提供了强大的代码和文件模板功能，我们可以使用它来创建Flutter的模板。

如何创建模板

在文件目录处，右键选择New，选择EditFileTemplates...，会出现一个编辑模板的弹窗。

在弹窗中，点击下图红框中的+号，就可以创建一个文件模板了，只需要将模板代码输入到右侧的编辑区域即可。

代码模板示例

StatelessWidget模板

#set($nameparts=$NAME.split("_"))

#set($namepart='')

#set($classname='')

#foreach($namepartin$nameparts)

#set($classname=$classname+$namepart.substring(0,1).toUpperCase()+$namepart.substring(1))

import'package:flutter/material.dart';

class$classnameextendsStatelessWidget{

//TODO:addstatevariables,methodsandconstructorparams

$classname();

@override

Widgetbuild(BuildContextcontext){

//TODO:addwidgetbuildmethod

returnnull;

StatefulWidget模板

#set($nameparts=$NAME.split("_"))

#set($namepart='')

#set($classname='')

#foreach($namepartin$nameparts)

#set($classname=$classname+$namepart.substring(0,1).toUpperCase()+$namepart.substring(1))

import'package:flutter/material.dart';

class$classnameextendsStatefulWidget{

@override

_${classname}StatecreateState()=new_${classname}State();

class_${classname}StateextendsState$classname{

//TODO:addstatevariablesandmethods

@override

Widgetbuild(BuildContextcontext){

//TODO:addwidgetbuildmethod

returnnull;

这里最值得注意的是import语句前的的一段代码，它是把小写下划线格式的dart文件名，转换成大驼峰格式的dart类名。比如hello_world_widget.dart就会变成HelloWorldWidget。

这样就可以模仿着写一个自己的模板了，比如笔者针对Stateless的Scaffold的页面制作了一个模板：

#set($nameparts=$NAME.split("_"))

#set($namepart='')

#set($classname='')

#foreach($namepartin$nameparts)

#set($classname=$classname+$namepart.substring(0,1).toUpperCase()+$namepart.substring(1))

import'package:flutter/material.dart';

class$classnameextendsStatelessWidget{

const$classname({Keykey}):super(key:key);

@override

Widgetbuild(BuildContextcontext){

returnScaffold(

appBar:AppBar(

title:Text("$classname"),

body:Container(),

如何使用模板

在文件目录处，右键选择New，选择自己创建的模板（如下图），就会弹出一个弹窗，输入dart文件名即可生成模板