前言
接下来直接进入项目的介绍, 在这说明下我的学习路线, 注重实战讲解, 不去一个个解析官方的 API 是如何调用, 如何使用的, 因为这些官网已经讲的很细了, 希望在项目的开发过程中, 遇到不明白的概念不会用的组件, 再带着问题去找答案, 本期先看下 Flutter 的项目结构, 对项目的目录有个清晰的认识后, 知道将代码写在哪, 如何引用第三方库, 如何做项目配置.
目录如图
项目目录以及配置文件
通过上面图你会发现一下几个点:
Flutter 项目实际上和 React Native 目录结构一样, 都包含 Android 和 iOS 项目, 都是在各自的项目中添加 flutter 依赖, 最终集成到各自的项目中.
Flutter 是用 YAML 文件配置 ,YAML 类似于标准通用标记语言的子集 https://baike.baidu.com/item/XML 的数据描述语言, 语法比 xml 简单很多. 推荐学习链接 - YAML 语法 - 国内最专业的 Ansible 中文官方学习手册
pubspec.bock 是 pubsec.YAML 的配置生成文件, 里面包含具体依赖的版本, 建议上传 Git, 这样保证你跟同事使用的依赖是同一个版本, 保证代码一致性, 避免不必要的问题出现.
iOS 代码, 使用 CocoaPods 管理依赖
Android 代码, 使用 Gradle 管理依赖
lib 为 dart 代码, 使用 pub 管理依赖,
Pub https://pub.dartlang.org/ 包仓库, 在 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, 加油, 有任何不明白的欢迎提问.
来源: http://www.jianshu.com/p/11604d040a28