flutter 学习笔记

资源

widget 展示：

https://gallery.flutter.dev/#/

How Flutter renders Widgets
https://www.youtube.com/watch?v=996ZgFRENMs

chapter2

Build a new app with flutter create.
• Use widgets to compose a screen with controls and layout.
• Use widget parameters for styling.
• A MaterialApp widget specifies the app, and Scaffold specifies the high-level
structure of a given screen.
• State allows for interactive widgets.
• When state changes, you usually need to hot restart the app instead of hot reload.
In some case, you may also need to rebuild and restart the app entirely

使用flutter create创建一个新的应用程序。

• 使用widget来组成一个带有控件和布局的屏幕。
• 使用widget参数进行样式设计。
• MaterialApp widget指定应用程序，而Scaffold指定给定屏幕的高层结构。
• state 允许交互式widgets。
• 当状态发生变化时，您通常需要热重启应用程序，而不是热重新加载。在某些情况下，您可能还需要完全重建和重启应用。

chapter3

Widget 主要分为三类：
structure和navigation；
displaying information ；
positioning widgets

• Flutter 有两种主要的可视化设计系统：
  Material 和 Cupertino。
  它们可以帮助您构建在 Android 和 iOS 上看起来原生的应用程序。

• 使用 Material 主题，您可以构建多种多样的用户界面元素，让您的应用程序拥有自定义的外观和感觉。
  给你的应用程序一个自定义的外观和感觉。

一般来说，为你的应用建立一个通用的主题对象是个好主意，这样你的应用就有了一个单一的可靠风格。

• Scaffold widget 可满足您所有基本的视觉布局结构需求。
• Container Widget 可用于将其他widget组合在一起。
• stack widget 可将子 widget 层层叠加。

chapter4 理解 widget

你可能听过 flutter 中一切皆widget 。当然这不全对，但是大部分情况你在构建自己的app 的时候，你只会看到最上面的一层：widges 。

这一章，你将深入widget 的理论。你将探索：

• Widgets
• Widigets rendering
• Flutter Inspector
• Type of widgets
• Widget lifecycle

现在是时候进入主题啦 。

什么是 widgets

Widgets是用户界面的一个构件。使用widgets 就像组合
乐高积木。就像乐高积木一样，您可以混合和搭配widgets ，创造出令人惊叹的作品

Flutter 的声明性使得使用 widget 构建用户界面变得超级简单。widgets
是显示应用程序State 的蓝图。

Widget trees

每个widget 都包含一个 build() 方法。在该方法中，您可以通过在其他 widget 中嵌套 widget 来创建 UI
组合。这就形成了一个树状数据 结构。
Widget 树提供了一个蓝图，描述了用户界面的布局方式。框架会遍历树中的节点，并调用每个 build() 方法来 组成整个用户界面

渲染widgets

第 1 章 "入门 "中，您了解到 Flutter 的架构包含三层

• Framwork(dart)
• Engine(c/c++)
• Embedder(Platform-specfic)

我们把Framework 分成四部分

• Material 和 Cupertino 是建立在 widget 层之上的 UI 控制库。
  它们能让你的用户界面看起来和感觉上分别像 Android 和 iOS 应用程序。

• Widgets层是widgets的组成抽象。它包含创建 UI
  创建 UI 控件所需的基本类

• 渲染层是一个布局抽象，用于绘制和处理widgets的
  布局

• 基础层也称为 dart:ui 层，包含处理动画、绘画和手势的核心库。
  动画、绘画和手势的核心库。

三棵树

Flutter 框架实际上并行管理的不是一棵树，而是三棵树：

• widget树
• elements 树
• 渲染对象树
  以下是单个部件在引擎盖下的工作原理：

1. Widget： 公共 API 或框架蓝图。开发人员通常只 处理widget的组合。
2. 元素（Element）： 管理widget和widget的呈现对象。树中的每个部件
   都有一个对应的元素。
3. 渲染对象： 负责绘制和布局特定的 widget
   实例。还负责处理用户交互，如点击测试和手势。

elments 类型

有两种类型的元素：

1. 组件元素（ComponentElement）： 一种由其他元素组成的元素。这相当于在其他小部件内部组成小部件。
2. RenderObjectElement（呈现对象元素 一种包含呈现对象的元素。
   你可以把 ComponentElement 视为一组元素，而把 RenderObjectElement 视为一个元素。
   RenderObjectElement 则是单个元素。请记住，每个元素都包含一个
   呈现对象来执行部件绘制、布局和命中测试。

Types of widgets

小部件有三种主要类型：
无状态
有状态
继承。
所有部件都是不可变的，但有些部件可以通过其元素附加状态。
接下来您将进一步了解它们之间的区别。

无状态部件

无状态部件一旦创建，就无法更改其状态或属性。当您的
属性不需要随时间改变时，一般来说，使用无状态部件是个好主意。
无状态 widget 的生命周期始于一个构造函数（你可以向其传递参数）和一个 build() 方法（你可以重载该方法）。
参数，并覆盖一个 build() 方法。部件的可视化描述
由 build() 方法决定。

以下事件会触发此类部件的更新：

1. 首次将 widget 插入 widget 树。
2. 依赖或继承 widget（祖先节点）的状态发生变化。

Stateful widgets

有状态的部件会保留状态，这在用户界面的某些部分需要动态变化时非常有用。
有状态部件将其可变状态存储在一个单独的状态类中。这就是为什么每个
有状态部件都必须覆盖并实现 createState()。
接下来，我们来看看有状态部件的生命周期。

状态对象生命周期

每个部件的 build() 方法都会将 BuildContext 作为参数。构建
上下文会告诉你在部件树中的位置。您可以通过
元素。稍后，你会看到为什么构建上下文很重要，尤其是在访问部件的状态信息时。
重要的原因，尤其是在从父部件访问状态信息时。

现在，请仔细看看生命周期：

1. 将构建上下文分配给 widget 时，内部标志 mounted 会被设置为 true。
   设置为 true。这会让框架知道，该部件当前位于部件 树上。
2. initState() 是创建部件后调用的第一个方法。这类似于 android 中的 onCreate()或 iOS 中的 viewDidLoad()。
3. 框架在第一次创建 widget 时，会在 initState() 之后调用 didChangeDependencies()
   调用 didChangeDependencies()。如果状态对象依赖于一个继承的 widget，框架可能会再次调用 didChangeDependencies()。
4. 最后，框架会在 didChangeDependencies() 之后调用 build()。这个
   函数对开发人员来说是最重要的，因为每当一个
   部件需要渲染时都会调用它。树中的每个部件都会以递归方式触发 build() 方法。
   方法，因此该操作必须非常快速。

注意：应始终以异步方式执行繁重的计算功能 
并将其结果存储为状态的一部分，以便以后使用 
构建()函数。
需要大量计算的功能。这类似于你对 iOS 或 
Android 的主线程。例如，绝不能进行网络调用，导致 
停滞 UI 渲染

5. 当父部件发生变化或需要重绘用户界面时，框架会调用 didUpdateWidget(_) 。
   当这种情况发生时，您将获得 oldWidget 实例作为参数，这样您就可以将其与当前的 widget 进行比较，并执行任何操作。
   作为参数，这样您就可以将其与当前 widget 进行比较，并执行任何
   附加逻辑。
6. 每当要修改 widget 中的状态时，就需要调用 setState()。然后，框架会将
   框架就会将 widget 标记为 dirty，并再次触发 build()。

注意：异步代码在调用 setstate() 之前，应始终检查挂载属性是否为 true。
属性为 true，因为部件可能不再是 部件树的一部分。

7. 当你从树中移除对象时，框架会调用 deactivate()。
   在某些情况下，框架可以将状态对象重新插入树的另一部分。
   树的另一部分。
8. 当你从树中永久移除对象及其状态时，框架会调用 dispose()。这个方法非常重要，因为你需要它来
   处理内存清理，如取消订阅流和处置动画或控制器。

dispose ()方法的经验法则是检查您在状态中定义的任何属性，并确保您已将其从树中删除。

chapter5 Scrollable Widgets

• ListView 和 GridView 支持水平和垂直滚动方向。
• primary 属性可让 Flutter 知道哪个滚动视图是主滚动视图。
• 滚动视图中的physics属性可以让你改变用户的滚动交互方式。
• 特别是在嵌套列表视图中，请记住将 shrinkWrap 设置为 true，这样您就可以 为列表中的所有项目提供固定高度。
• 使用 FutureBuilder 等待异步任务完成。
• 你可以嵌套可滚动部件。例如，你可以将网格视图放在一个 列表视图中。尽情发挥你的想象力吧
• 使用 ScrollController 和 ScrollNotification 控制或监听滚动 行为。
• Barrel files可以方便地将导入内容分组。它们还能让你使用单个文件导入多个 Widgets

chapter6 Interactive Widgets

• 您可以使callbacks 或者 provider packages 传递数据。

• 如果需要向上一级传递数据，用 callbacks 。

• 如果需要在 widget 树的深处传递数据，则使用providers。

• Provider 是一种状态管理辅助工具，它充当继承的widgets 包装器。

• Provider 可帮助将状态模型对象暴露给下面的 widget。

• consumer 会监听值的变化，并重建其下方的部件。

• 按屏幕分割widgets ，保持代码的模块化和条理性。

• 创建管理器对象，以便在一个地方管理功能和状态变化。

• 手势部件可识别并确定触摸事件的类型。它们提供 回调，以响应 onTap 或 onDrag 等事件。

• 您可以使用dismissible widget 来测滑移除 列表中的项目。

chapter7 路由和导航

• Navigator 1.0 适用于快速、简单的原型，可显示警报和对话框。

• 当您在管理导航堆栈时需要更多控制和组织时，Router API 将非常有用。

• GoRouter 是对 Router API 的封装，使开发人员更容易使用。

• 有了 GoRouter，你就可以使用 goNamed 而不是 go 来导航到其他路由。

• 使用router widget 来监听导航状态的变化并配置您的 导航器的页面列表。

• 如果您需要在某些状态变化后导航到另一个页面，请在 GoRouter 的重定向处理程序中进行处理。

• 您可以通过实现 errorPageBuilder 来定制自己的错误页面