本文介绍了Flutter的初次体验，包括环境搭建、Flutter文档结构以及核心概念。重点讲解了Flutter的动画、路由导航和状态管理。通过简单的实例展示了如何创建动画效果、使用命名路由传递数据以及理解声明式编程在状态管理中的应用。
一个幻灯片分享，现在整理成文章。
分享试图建立起 —— 对 Flutter 的初次印象、对 Flutter 世界的 Mental Model、对 Flutter 文档的宏观认知。
见面会开始。
开发起步，首先搭建 Flutter 开发环境。
按照 Flutter 文档一步步操作即可，最后运行 flutter doctor，查看是否全部打勾。
额外安装 3 个软件：Android Studio、Xcode、VS Code。
检查项第 1 项，安装完 Android Studio 后打开，根据提示操作即可完成。最后一项，运行红字命令即可。
Flutter 文档网站，侧边栏共 8 个主菜单项。
学习开发阶段，主要关注 Development 即可。
对 8 个主菜单项下的子菜单，进行一下大致了解，一些推荐页面被框了起来。
前 4 大项：起步、教程、开发、测试。
后 4 大项：性能、发布、资源、参考。
推荐页面列表。
第一个页面 Write your first Flutter app，非常简单，跟着一步一步即可搭建一个简单的 Flutter App。
跟着走一遍，可以建立对 Flutter 的初步认知与兴趣，非常推荐。
Flutter 技术架构的大体介绍。
Flutter 共有 3 个核心概念：1. 一切都是微件、2. 搭建微件、3. 处理用户交互。
其中 "一切都是微件" 又有两个子概念：① 组合优于继承、② 多层蛋糕很好吃。
一切都是微件。
Button Menu，或是 Font、Color，甚至 Padding —— 在 Flutter 的世界里，它们都是微件，微件可以是任何东西。
组合优于继承。
Flutter 从 React 中汲取了很多思想，"组合优于继承" 是其中一个。
Flutter 的微件共分为两大类，StatelessWidget 与 StatefulWidget，无状态微件与有状态微件。
多层蛋糕很好吃。
不管是底层基础微件，还是高级封装微件，不同层级的微件，开发者都可以自由使用。
正如前端开发中，不管是底层基础的 <div>，还是高级封装的 <Modal>，开发者都可以自由使用。
Flutter 渲染系统的 3 个层级：最底层 dart.ui，之上 rendering，最上层 widget。
开发者对这 3 层的 API，都可以自由调用。
Flutter 微件概览。
Development 下的介绍页为目录页，进行了分类，Reference 下的介绍页为索引页，一页展示全部微件。
目录页相加共 161 个微件，索引页共 155 个微件，因为目录页一些微件出现在了不同分类中。所以 Flutter 的文档上，共 155 个微件。
微件是 Flutter 开发的根本，对全部微件有一个宏观的认知是重要的。
Flutter 有两套预置的风格化微件库：iOS 风格的 Cupertino 与 Android 风格的 Material Components。
"Cupertino" 是个地名，苹果总部就位于这个地方。
图中蓝点，就是苹果总部的位置，在 Cupertino 的东北角。
文档 8 个主菜单项中，学习开发阶段主要关注 Development。
Development 下包含 8 个子菜单项，主要关注 UI 与 Data & backend 两个子菜单项即可。
一个 App 的开发中，我们主要关注界面、路由、 状态管理 3 个点。
之前介绍了用来构建界面的微件，现在介绍第 2 个关注点 —— 路由。
所以 UI 菜单项下的页面中，主要介绍 Navigation & routing，对 Flutter 的路由系统进行一下了解。
跳到一个新页面，再从新页面跳回。
Navigator.push(context, Page) 跳过去，Navigator.pop(context) 跳回。
与 vue-router 的 this.$router.push()、react-router 的 history.push() 类似。
使用命名路由跳转。
上一种跳转方式适用于简单场景，而实际开发中，主要使用的应该是命名跳转这种方式。
首先在 routes 中配置路由，然后 Navigator.pushNamed(context, '/page') 跳过去，Navigator.pop(context) 跳回。
使用 Navigator.push() 时，发送数据到新页面。
两种方式，一种是在页面微件调用时传入 Page(todo: todos[i])，一种是使用 settings 参数 。
使用 Navigator.pushNamed() 时，发送数据到新页面。
使用其第 3 个参数 arguments。
跳到新页面又跳回时，拿到从新页面带回的数据。
Vue 与 React 路由中没有此种使用方式。
主要是将 Navigator.push() 异步化（使用 async await 关键字），然后 Navigator.pop() 第 2 个参数传入需带回的数据。
切换页面时的动画效果。
非常简单，两个页面中放置一模一样的元素即可，比如上图代码中，两个微件拥有一模一样的 Image.network()。
App 三大件，界面、路由、 状态管理，现在介绍第 3 个关注点 —— 状态管理。
所以 Data & backend 菜单项下的页面中，主要介绍 State management，对 Flutter 的状态管理进行一下了解。
开始声明式思考 —— 声明式编程，区别于命令式编程。
UI = f(state)，Flutter 从 React 借鉴的另一理念。
React 中，组件其实就是函数，传入 state，返回 UI，传入新的 state，返回新的 UI，仅此而已。
Flutter 中使用了同样的思维方式。
Flutter 没有提供一个类似 Vuex 或 Redux 这样的全局状态管理。
其文档中介绍的使用方式及概念，与 React 极其类似，比如状态提升、Consumer、Provider 等。
类比一下 React，基本没有什么理解负担。
就这些，完了。
拜拜~
PDF 下载：https://drive.google.com/open?id=1Ay9aRRcb2-LZWD4iUrNDu81LDMX6WJfI
扫一扫
224
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
