日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

Android?Studio生成?Flutter?模板代碼技巧詳解_Android

作者：滄海一樹 ? 更新時(shí)間： 2022-11-22 編程語(yǔ)言

正文

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

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

快捷輸入

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

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

// | 表示多行光標(biāo)，可以輸入類名
class | extends StatelessWidget {
  const |({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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

// | 表示多行光標(biāo)，可以輸入類名
class | extends StatefulWidget {
  const |({Key? key}) : super(key: key);
  @override
  _|State createState() => _State();
}
class _|State extends State<> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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

AS 文件模板

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

如何創(chuàng)建模板

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

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

代碼模板示例

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 語(yǔ)句前的的一段代碼，它是把小寫下劃線格式的 dart 文件名，轉(zhuǎn)換成大駝峰格式的 dart 類名。比如 hello_world_widget.dart 就會(huì)變成 HelloWorldWidget。

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

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

參考文檔

How to make templates in Android Studio

原文鏈接：https://juejin.cn/post/7152714489895321614

欄目分類
最近更新