Flutter系列之简单了解项目结构

前言

接下来直接进入项目的介绍，在这说明下我的学习路线，注重实战讲解，不去一个个解析官方的API是如何调用，如何使用的，因为这些官网已经讲的很细了，希望在项目的开发过程中，遇到不明白的概念不会用的组件，再带着问题去找答案，本期先看下Flutter的项目结构，对项目的目录有个清晰的认识后，知道将代码写在哪，如何引用第三方库，如何做项目配置。

目录如图

项目目录以及配置文件

通过上面图你会发现一下几个点：

• Flutter项目实际上和React Native目录结构一样，都包含Android和Ios项目，都是在各自的项目中添加flutter依赖，最终集成到各自的项目中。
• Flutter是用yaml文件配置 ，yaml类似于标准通用标记语言的子集XML的数据描述语言，语法比XML简单很多。推荐学习链接 - YAML 语法— 国内最专业的Ansible中文官方学习手册
• pubspec.bock 是pubsec.yaml的配置生成文件，里面包含具体依赖的版本，建议上传git，这样保证你跟同事使用的依赖是同一个版本，保证代码一致性，避免不必要的问题出现。
• iOS代码，使用CocoaPods管理依赖
• Android代码，使用Gradle管理依赖
• lib为dart代码，使用pub管理依赖，
• Pub 包仓库，在js中相当于npm的角色，主要管理开源项目依赖，在yaml文件中配置生效。
  如此看来，万变不离其宗，还是React Native的套路，只不过Dart语言有自己的管理套件。

Main.dart

分析下这个类，如图：

Main.dart

我们从上往下分析下这个类

• import 导入material.dart package 在编译器中点进去源码看下如下
  

  package
  会js的朋友都不陌生，导入这个包等于是可以使用这个包下所有的组件。
• main() lambda 表达式 实际return runApp函数，传入MyApp()对象
• MyApp对象 继承StatelessWidget 无状态组件，Flutter里面没有像Activity一样的角色，更像是直接使用的View，基于Widget做页面而不是Activity，这样就把Activity的双重作用单一出来，View就是View，说白了还是借鉴了React的思想。该类实现的build的函数就是页面内容渲染的关键。
• MyHomePage 该类是一个有状态的组件，继承StatefulWiget类，实现createState函数，并返回State状态类的实现。StatefulWiget并没有状态管理，它是不可变的，而是依赖于State做状态管理，体现了职责单一的原则。
• _MyHomePageState 该类是UI渲染最终的实现类，里面包含了appBar，Text，Button的使用。
• title属性 发现在MyHomePage构造中传入了title字段，可没发现MyHomePage类中有人调用，直到在_MyHomePageState中才发现一个 widget.title的调用，这样就明白了，在Widget中定义的属性，可以在State中通过widge.调用。

总结

通过对项目结构的了解，和对主页UI的认识，感觉到Flutter设计的精髓大多数来源于React，有任何不明白的欢迎提问，加油。