Android Studio生成 Flutter 模板代码技巧详解

目录
  • 正文
  • 快捷输入
  • AS 文件模板
    • 如何创建模板
    • 代码模板示例
    • 如何使用模板

正文

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

笔者使用的是 Android Studio,所以这里的技巧都是在 AS 中使用的。

快捷输入

Android Studio 的 Flutter 插件提供了一些在代码编辑区域的快捷输入,根据这些输入可以快速生成模板代码。最常用的快捷输入是 stlessstful

stless 表示生成一个 Stateless 的 Widget。

// | 表示多行光标,可以输入类名
class | extends StatelessWidget {
  const |({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

stful 表示生成一个 Stateful 的 Widget。

// | 表示多行光标,可以输入类名
class | extends StatefulWidget {
  const |({Key? key}) : super(key: key);
  @override
  _|State createState() => _State();
}
class _|State extends State<> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

一个小缺点:不能自动生成 import,需要额外手动 import material 库。

AS 文件模板

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

如何创建模板

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

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

代码模板示例

StatelessWidget 模板

#set( $nameparts = $NAME.split("_"))
#set( $namepart = '')
#set( $classname = '')
#foreach( $namepart in $nameparts )
    #set( $classname = $classname + $namepart.substring(0, 1).toUpperCase() + $namepart.substring(1))
#end
import 'package:flutter/material.dart';
class $classname extends StatelessWidget {
    // TODO: add state variables, methods and constructor params
    $classname();
    @override
    Widget build(BuildContext context) {
        // TODO: add widget build method
        return null;
    }
}

StatefulWidget 模板

#set( $nameparts = $NAME.split("_"))
#set( $namepart = '')
#set( $classname = '')
#foreach( $namepart in $nameparts )
    #set( $classname = $classname + $namepart.substring(0, 1).toUpperCase() + $namepart.substring(1))
#end
import 'package:flutter/material.dart';
class $classname extends StatefulWidget {
    @override
    _${classname}State createState() => new _${classname}State();
}
class _${classname}State extends State<$classname> {
    // TODO: add state variables and methods
    @override
    Widget build(BuildContext context) {
        // TODO: add widget build method
        return null;
    }
}

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

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

#set( $nameparts = $NAME.split("_"))
#set( $namepart = '')
#set( $classname = '')
#foreach( $namepart in $nameparts )
    #set( $classname = $classname + $namepart.substring(0, 1).toUpperCase() + $namepart.substring(1))
#end
import 'package:flutter/material.dart';
class $classname extends StatelessWidget {
  const $classname({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("$classname"),
      ),
      body: Container(),
    );
  }
}

如何使用模板

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

参考文档

How to make templates in Android Studio

以上就是Android Studio生成 Flutter 模板代码技巧详解的详细内容,更多关于Android Studio生成Flutter模板的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android PC投屏功能实现的示例代码

    本文介绍了Android PC投屏功能实现的示例代码,分享给大家,具体如下: 代码地址 :https://github.com/deepsadness/MediaProjectionDemo 效果预览 投屏效果预览 简单说明: 使用Android MediaProjection Api来完成视频的截图 通过WebSocket进行链接.将图片传递给网页 想法来源 看到vysor,觉得特别好玩,于是就想着自己能不能试着做一个类似的功能出来.搜索了相关实现.发现网上已经有网友针对vysor做了分析.于

  • Android Studio gradle配置packagingOptions打包so库重复

    目录 正文 pickFirst 匹配 doNotStrip 设置 merge 将匹配的文件都添加到APK中 exclude 过滤 正文 在安卓开发中,通常会使用到gradle来编译,在安卓项目的app目录下的build.gradle中是用来对编译进行配置的,packagingOptions 是其中的一个打包配置,常见的设置项有exclude.pickFirst.doNotStrip.merge. 在日常代码开发中,我们需要知其然,而知其所以然,本文章知识也是Android日常瘦身的的必备知识.

  • Android Studio Electric Eel支持手机投屏

    目录 Android Studio 手机投屏 如何开启功能 投屏效果 Android Studio 手机投屏 当我们在线上做技术技术分享或者功能演示时,有时需要共享连接中的手机屏幕,通常我们会求助于 Vysor,Scrcpy 等工具.如果你是一个 Android Developer,那么现在有了更好的选择. 近期 Android Studio Electric Eel (电鳗)发布了 Release 版,这个版本开始引入了 Divice Mirroring 功能,即手机投屏,且功能非常强大: 手

  • android studio打印日志语句Log.d()详解

    Log.d()方法内需要传入两个参数. 1.第一个参数时tag,一般传入类名,用于对打印信息进行过滤: 2.第二个参数,是一个字符串类型的msg,表示你想要打印的内容. 输出Log.d()语句的快捷键为: logd+tab键 在我们每写一条Log.d()语句时,就要传入一次tag参数,而每一次的tag参数值基本是一样的,这样就会很麻烦,其实只要我们在类中创建一个字符串类型的变量TAG,那么在我们每次写log.d()语句的时候,系统就会自动将该TAG的值传入tag参数中 自动生成一个以当前类名作为

  • Android Studio下的APP目录结构详解

    Project Name:工程项目名称 Application Name:当前应用发布以后的名字,例如QQ图标下面的名字是"QQ",就是Application Name. Android Studio工程目录 1..gradle和.idea 这两个目录下放置的都是Android Studio自动生成的一些文件,我们无须关心,也不要去手动编辑. 2.app 项目中的代码.资源等内容几乎都是放置在这个目录下的,我们后面的开发工作也基本都是在这个目录下进行的,待会儿还会对这个目录单独展开进行

  • Eclipse工程转为兼容Android Studio模式的方法步骤图文详解

    方法/步骤 准备好需要转换的工程 , 最好是新建一个文件夹 , 然后将主工程和依赖工程放到同一个目录 屏幕快照 2016-12-24 12.43.02.png 在eclipse中导入主工程和依赖工程 , 导入之后最好先跑一遍 , 确定没有问题再继续操作 屏幕快照 2016-12-24 12.40.03.png 在主工程上右键导出 屏幕快照 2016-12-24 12.53.51.png 将工程导出为Generate Gradle build files , 这一步很重要哦 , 只有导出为这个模式

  • Android开心消消乐代码实例详解

    突然想要在android上写一个消消乐的代码,在此之前没有系统地学过java的面向对象,也没有任何android相关知识,不过还是会一点C++.8月初开始搭建环境,在这上面花了相当多的时间,然后看了一些视频和电子书,对android有了一个大概的了解,感觉差不多了的时候就开始写了. 疯狂地查阅各种资料,反反复复了好几天后,也算是写出了个成品.原计划有很多地方还是可以继续写下去的,比如UI设计,比如动画特效,时间设计,关卡设计,以及与数据库的连接,如果可以的话还能写个联网功能,当然因为写到后期内心

  • Android Studio 修改应用包名实例详解

    Android Studio 修改应用包名实例详解 我们平时新建项目有些朋友可能当时就是随意写的一个包名,然后在项目过程中, 又感觉这个包名不太好,所以就要对包名进行修改,根据我们正常的修改方式,是这样的. 在种情况是只能修改最外层的那个名称, 如果我们现在是需要修改中间的某一个,这里就行不通了. 那么我们来看一下如何修改成你最终要的包名. 操作图如下: 看到没有,我们只需要在setting里面,把 compact empty middle packages 这个选项去掉,这样,我们的包的层次结

  • 如何利用Android Studio将moudle变成jar示例详解

    前言 本文主要给大家介绍的是关于利用Android Studio将moudle变成jar的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 方法如下: 1.在moudle中的build.gradle文件中添加如下代码:(和android.dependencies标签同级) task makeJar(type: Copy) { delete 'build/libs/test.jar' from('build/intermediates/bundles/release/')

  • Android studio点击跳转WebView详解

    本文实例为大家分享了Android studio点击跳转WebView的具体代码,供大家参考,具体内容如下 代码文件 import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.

  • android studio与手机连接调试步骤详解

    android studio 版本不同连接手机方式有细微的不同,主要方式相似.介绍主要分手机和电脑两部分介绍. 一.手机部分 1.手机端下载一个"一键root权限获取",在安装的过程中需要安装KingRoot,获取手机root权限.网上有些说法,说手机侧不需要获取root权限,我自己尝试失败了.不过不是所有的手机都能获取root权限的.比如我手上的三星就没有能获取到,不过我的老手机多,这也就不是什么问题了 2.下载"ABD Wireless",这是一个adb服务.需

  • Android Studio使用USB真机调试详解

    本文为大家分享了Android Studio使用USB真机调试的具体方法,供大家参考,具体内容如下 以小米4为例,先将手机通过USB连接电脑,在设备管理器中确保驱动安装正确. 对手机的设置 1.设置手机为开发者模式(设置->关于手机->连续点击MIUI版本--开启成功) 2.在更多设置中找到系统安全设置--允许安装未知来源的应用 3.在更多设置中选择开发者选项,在开发者选项中同时勾选USB调试和USB安装的开关 对Android Studio 的设置: 1.在工具栏中找到app,点开后选择&q

  • Android Studio绑定下拉框数据详解

    效果显示: 1.页面xml代码(项目的代码,直接复制会有错,自己修改一下就好) <TextView android:id="@+id/consultation_tv_section" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/consultation_et_doctor&qu

随机推荐