03.05 前端跨平台方案Flutter第一个项目工程文件结构详细解释

本头条核心宗旨

欢迎来到「技术刚刚好」作者,「技术刚刚好」是个人维护,每天至少更新一篇Flutter技术文章,实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术,那就跟我一起学习进步吧,你的赞,收藏,转发是对我个人最大的支持,维护不易,欢迎关注。

技术刚刚好经历

近几年,移动端跨平台开发技术层出不穷,从Facebook家的ReactNative,到阿里家WEEX,前端技术在移动端跨平台开发中大展身手,技术刚刚好作为一名Android开发,经历了从Reactjs到Vuejs的不断学习。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App。希望跟大家一起学习,一起进步!

今天在来给大家分析一下Flutter第一个程序结构,

首先我们新建完工程之后就会有一个新的程序,效果如图1

前端跨平台方案Flutter第一个项目工程文件结构详细解释

如图1

如图1我们清楚的能看到一个Flutter项目的结构有,flutter_app1的文件夹名字,也是项目的主目录,

然后有.dart_tool文件,这个文件就是dart的一些编译文件,(图2)这个第一个文件夹就是一个MD5后的文件夹名字,也是一个临时文件,里面都是一些dill文件,重点是我们要来看一下下面有个json文件。

前端跨平台方案Flutter第一个项目工程文件结构详细解释

图2

package_config.json文件讲解

这个文件大家打开可以看到是一些JSON格式的配置文件,可以看出是一些工具名字\\版本号\\和文件位置的展示,就是我们这个项目依赖了哪些工具命令文件.

前端跨平台方案Flutter第一个项目工程文件结构详细解释

图3

.idea文件介绍

这个文件大家应该都知道了,我们用的是Android Studio工具开发的,所以这个里面也是一些Android studio工具产生的一些临时文件,可以随时删除,然后编译过后有会出来。

前端跨平台方案Flutter第一个项目工程文件结构详细解释

图4

Android文件夹介绍

这个文件夹做安卓开发的同学们应该知道它的作用了,虽然我们是做Flutter开发,其实Flutter开发也只是一个UI插件而已,我们平时写的dart文件最后还是要通过这层来桥接,链接到我们的ui上面,所以Android 这个文件夹才是核心,所以结构跟平时做安卓开发的一个项目一模一样,这里就不做过多细致讲解,大家知道这个文件的作用就OK了。

前端跨平台方案Flutter第一个项目工程文件结构详细解释

图5

build文件

这个文件的作用就是大家点击运行APP的时候会编译代码,然后运行到手机上面,而手机上面那个文件去哪儿了?就在这个build文件夹里面能够找到编译后可执行的文件。

前端跨平台方案Flutter第一个项目工程文件结构详细解释

图6

IOS文件夹

这个文件夹大家应该也清楚是做什么的了?通Android一样的道理,这个文件夹就是IOS手机需要的项目文件夹,里面跟IOS项目也是一模一样的,所以Flutter跨平台,就是因为把两个平台的核心东西都嵌入了进来,然后根据平台去编译不同版本,所以就达到了跨平台,就算Flutter不能实现的功能,我们也可以通过这两个项目的底层来实现相应的功能。


前端跨平台方案Flutter第一个项目工程文件结构详细解释

图7

lib文件和test文件

这两个文件比较重要的就是lib文件夹了,这个文件夹就是我们作为Flutter程序员的核心文件夹了,常用的一个文件夹,平时我们写的代码都放到这个里面,这个文件夹可以按照功能来划分不同的包结构。而test文件夹就是一些存放平时大家写的测试文件代码。

前端跨平台方案Flutter第一个项目工程文件结构详细解释

图8

其他文件介绍

比如.gitignore这个文件就是用来git提交代码过滤杂物的功能,比如你不需要提交到服务器的文件都可以在这个里面配置一下就行了,而.metadata文件就是当前跟踪信息都在这个里面,而packages文件就是当前编译的一些包信息都在这个里面,比较重要的一个配置文件pubspec.yaml,这个文件很重要,大家如果在写Flutter项目需要第三方的一些开源库都可以在这个文件里面进行配置和编译,包括版本号,升级信息都在这个里面配置。

前端跨平台方案Flutter第一个项目工程文件结构详细解释

图9

总结

本文算是回顾了一下第一个Flutter程序的项目结构,下节课我们在来看看第一个工程的代码长什么样,和代码为什么能够运行到不同手机里面去。

谢谢观看技术刚刚好的文章,技术刚刚好是个人维护,每天至少更新一篇Flutter技术文章,实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术,那就跟我一起学习进步吧,你的赞,收藏,转发是对我个人最大的支持,维护不易,欢迎关注。


分享到:


相關文章: