阅读 167

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-routerthis.$router.push()react-routerhistory.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 极其类似,比如状态提升、ConsumerProvider 等。

类比一下 React,基本没有什么理解负担。


就这些,完了。

拜拜~


PDF 下载:drive.google.com/open?id=1Ay…


关注下面的标签,发现更多相似文章
评论