flutter动画json_Flutter提升开发效率的一些方法和工具

原标题&＃xff1a;Flutter提升开发效率的一些方法和工具

Flutter的环境搭配完之后&＃xff0c;就开始Flutter的开发&＃xff0c;下面的一些工具和方法&＃xff0c;可以省下一些时间。

自己在用的&＃xff0c;暂时想到的&＃xff0c;就是这些了&＃xff0c;总结一下。

1.JSON解析快速生成实体类

根据接口返回的数据&＃xff0c;编写实体类&＃xff0c;添加两个方法。

fromJson()方法是可以聪一个Map中构造出一个User的实例&＃xff0c;toJson()方法&＃xff0c;可以将一个实例转化为Map。

如果接口返回的数据比较复杂点&＃xff0c;那么手动写起来就会很麻烦。这个时候可以利用json_serializable来帮你自动生成实体类的一些代码&＃xff0c;还有利用caijinglong.github.io/json2dart/i…来快速生成相关代码。

将json数据复制到这个网站上&＃xff0c;就会生成相关的代码&＃xff0c;只需要将这些代码复制到项目中的文件就行了&＃xff0c;

最后在我们的项目根目录下运行flutter packages pub run build_runner build&＃xff0c;我们可以在需要时为我们的model生成json序列化代码 。

注意&＃xff1a;要先在pubspec.yaml文件里面添加&＃xff1a;

每个类最后面生成的with _$UserSerializerMixin&＃xff0c;这部分可以去掉&＃xff0c;不去掉的话&＃xff0c;好像生成会有问题&＃xff0c;反正我是去掉了&＃xff0c;没什么影响。

2.代码模板

最简单的一个例子&＃xff0c;就是在写一个有状态StatefulWidget的时候&＃xff0c;要手动继承StatefulWidget&＃xff0c;重写createState方法&＃xff0c;再创建一个相应的State类并重写build方法。会写到你吐血。

这个时候就需要一些代码模板&＃xff0c;帮你快速生成代码。

反正百度一下肯定有些导入Flutter代码模板的教程。

比如直接打出stf&＃xff0c;就可以自动提示生成StatefulWidget的代码了。

3.Asset资源文件的导入

Flutter中&＃xff0c;常见类型的asset包括静态数据(例如JSON文件)&＃xff0c;配置文件&＃xff0c;图标和图片(JPEG&＃xff0c;WebP&＃xff0c;GIF&＃xff0c;动画WebP / GIF&＃xff0c;PNG&＃xff0c;BMP和WBMP)。

一般导入的资源都要在pubspec.yaml文件中按照下面的方式&＃xff0c;一个一个进行声明&＃xff0c;应用程序才能获取到。

改进方法&＃xff1a;要包含asset文件下面的所有资源&＃xff0c;直接用下面这样方法&＃xff0c;这样的话&＃xff0c;只在这个目录里的文件会被包含进来。

4.Flutter Outline工具&＃xff0c;主要用于视图的预览&＃xff0c;还有其他功能

在编写布局的时候&＃xff0c;可以看到Flutter Outline界面&＃xff0c;会实时地更新所写的布局层次&＃xff0c;方便查看。

除了视图的预览&＃xff0c;还有其他的功能。

就是右键某一个widget&＃xff0c;可以根据提示框&＃xff0c;快速帮你在这个widget的外面包装一层比如padding之类的代码。这个功能有时候挺方便的。

Extract method的作用是&＃xff1a;可以把某一个widget控件的代码&＃xff0c;帮你封装成一个方法。不用你去手动地去找出一个widget的全部代码&＃xff0c;再自己拉到某一个方法内。

另一方面&＃xff0c;也可以方便地看出这个widget的相关代码&＃xff0c;比如要复制操作起来也比较方便。

5.拖动widget自动生成相关代码

有一个网站&＃xff1a;flutterstudio.app/

可以拖动widget到模拟器中&＃xff0c;就可以生成相关的布局代码&＃xff0c;自己手动复制粘贴就可以了。

作者&＃xff1a;入魔的冬瓜

链接&＃xff1a;https://juejin.im/post/5bffea7551882505d840503a返回搜狐&＃xff0c;查看更多

责任编辑&＃xff1a;