Flutter Dart 代码片段

我会带着你远行 2024-04-18 22:11 81阅读 0赞

1）AndroidStudio添加dart代码片段  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70]  
这里我们直接用AS创建Dart文件，生成的文件是空白的，需要手动添加。是不是觉得好麻烦，  
相信你也是这样觉得的，所以分享一个小技巧  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 1]  
在这个地方添加上自己的Dart摸板即可，这样一来就可以把摸板参数带到Dart文件生成，下面是我的一个摸板，有需要可以复制使用

import 'package:flutter/material.dart';
    
    class ${NAME}Page extends StatefulWidget {
    ${NAME}Page({Key key, this.title}) : super(key: key);
     final String title;
    
     @override
      _${NAME}PageState createState() => _${NAME}PageState();
    }
    
    class _${NAME}PageState extends State<${NAME}Page> {
    
     @override
      Widget build(BuildContext context) {
       return Scaffold(
     	 appBar: AppBar(
      	  title: Text(widget.title),
      	),
     	 body: Center(
     	   child: Column(), 
    	  )// This trailing comma makes auto-formatting nicer for build methods.
    	);
    }
    }

2）vsCode 添加dart代码片段  
ctrl+shift+p输入snippet  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 2]  
找到dart.json文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 3]  
添加需要添加的代码片段，这里可以使用自己已有的代码片段，这个是我自己写的片段，如果需要，可以直接复制使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 4]

{ 
    	"Print to dartTemplate": { 
    		"prefix": "dartTemplate",
    		"body": [
    			"import 'package:flutter/material.dart';",
    			"\t",
    			"\tclass ${className}Page extends StatefulWidget {",
    			"\t ${className}Page({Key key, this.title}) : super(key: key);",
    			"\t",
    			"\t final String title;",
    			"\t",
    			"\t @override",
    			"\t _${className}PageState createState() => _${className}PageState();",
    			"\t}",
    			"\t",
    			"\tclass _${className}PageState extends State<${className}Page> {",
    			"\t @override",
    			"\t Widget build(BuildContext context) {",
    			"\t return Scaffold(",
    			"\t appBar: AppBar(",
    			"\t title: Text(widget.title),",
    			"\t ),",
    			"\t body: Center(",
    			"\t child: Column(),",
    			"\t ));",
    			"\t }",
    			"\t}",
    		],
    		"description": "dart代码片段"
    	}
    }

保存完成之后，新建文件直接输入dartTemplate就可以出来刚才保存的代码片段了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 5]  
红框的内容修改为自己的文件名称，也就是类名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 6]  
(本人菜鸟一枚，大家共同学习)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1b034181c11949c48a2bb2b5a4644bc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/8188b29c87904837b3a029e7583082b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/263cc19c17d941218d202ed51db83987.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1471dfee57534cbd92382bc486879d94.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d899b43f5f6b4c80811fc89d2ed673a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a6006999ebec4b21b8226d4a17fb75b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NDkzODQ4_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d3b590db3f6e456ea203ac55d0a4d65e.png