AndroidStudio生成Flutter模板代碼技巧詳解

第AndroidStudio生成Flutter模板代碼技巧詳解目錄正文快捷輸入AS文件模板如何創(chuàng)建模板代碼模板示例如何使用模板

正文

在開發(fā)Flutter時(shí)，常常需要?jiǎng)?chuàng)建新的頁面或新的Widget，每次都重新手寫總是很麻煩，這篇文章介紹一些減少手寫樣板代碼的方式。

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

快捷輸入

AndroidStudio的Flutter插件提供了一些在代碼編輯區(qū)域的快捷輸入，根據(jù)這些輸入可以快速生成模板代碼。最常用的快捷輸入是stless和stful。

stless表示生成一個(gè)Stateless的Widget。

//|表示多行光標(biāo)，可以輸入類名

class|extendsStatelessWidget{

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

@override

Widgetbuild(BuildContextcontext){

returnContainer();

stful表示生成一個(gè)Stateful的Widget。

//|表示多行光標(biāo)，可以輸入類名

class|extendsStatefulWidget{

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

@override

_|StatecreateState()=_State();

class_|StateextendsState{

@override

Widgetbuild(BuildContextcontext){

returnContainer();

一個(gè)小缺點(diǎn)：不能自動(dòng)生成import，需要額外手動(dòng)importmaterial庫。

AS文件模板

AndroidStudio提供了強(qiáng)大的代碼和文件模板功能，我們可以使用它來創(chuàng)建Flutter的模板。

如何創(chuàng)建模板

在文件目錄處，右鍵選擇New，選擇EditFileTemplates...，會(huì)出現(xiàn)一個(gè)編輯模板的彈窗。

在彈窗中，點(diǎn)擊下圖紅框中的+號，就可以創(chuàng)建一個(gè)文件模板了，只需要將模板代碼輸入到右側(cè)的編輯區(qū)域即可。

代碼模板示例

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文件名，轉(zhuǎn)換成大駝峰格式的dart類名。比如hello_world_widget.dart就會(huì)變成HelloWorldWidget。

這樣就可以模仿著寫一個(gè)自己的模板了，比如筆者針對Stateless的Scaffold的頁面制作了一個(gè)模板：

#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，選擇自己創(chuàng)建的模板（如下圖），就會(huì)彈出一個(gè)彈窗，輸入dart文件名即可生成模板