11 猜数字整理与总结

通过上面 5 章的学习，我们已经完成了一个简单的猜数字小项目。这里将对项目在的一些知识点进行整理和总结，主要从界面相关知识和获得的技能点两个方面进行总结：

一、 界面相关的知识

对于新手来说，Flutter 框架最最重要的就是完成界面在设备屏幕上的展示；并让用户在交互过程中展示准确的界面信息，以完成项目的功能需求。 从计数器和猜数字两个小项目中不难发现，组件 Widget 和界面呈现息息相关。

1.组件与界面的关系

现实中的一处建筑，在地图上可以用经纬度信息进行表示；界面的呈现效果，也可以用组件的信息进行表示。通过一个东西，可以确定另一个东西，这是一种非常典型的 映射关系 。组件对象可以决定界面上的展示内容，组件在构建过程中的配置参数，就是用于控制界面呈现效果的。

所以，组件(Widget) 本质上是对界面呈现的一种配置信息描述。

2.界面构建逻辑的封装

世界会分为很多国家、国家会分为很多省、省会分成很多市、市会分成很多县、区…等等。这是一个非常典型的 树形嵌套结构 ，对于管理来说，这种结构是不可或缺却的，比如一个公司的组织架构、一本书的目录结构。

当个体数量非常庞大，需要进行维护管理时，树形嵌套结构 可以很有效地将整体划分为若干层级。从而各司其职，完成整体的有序运转，社会是如此，对于界面来说也是一样。对于可交互软件的开发者而言，设备的界面就是一个世界，包含着各种各样的视觉元素，用户在使用软件交互过程中的正确性，就是世界的有序运转。

只靠一个人管理整个社会，其他全部躺平是不现实的; 同样只靠一个组件来维护界面也不是明智之举。组件可以表示界面上的一部分，合理地划分 "屏幕世界" 的区域，交由不同的组件进行管理，是一个好的习惯。这得益于组件可以对界面构建逻辑的进行封装。

3.状态数据与界面更新

Widget 对象的所有属性都需要是 final 修饰的，也就是说你无法修改 Widget 对象的属性。前面说过 Widget 可以决定界面的呈现效果，也就是说对于一个 Widget 对象 而言，它对应的界面效果是无法变化的。但界面在交互过程中，一定会有界面变化的需求，比如说计数器项目，点击按钮时文字发生变化。

可能会有人疑惑，既然你说 Widget 对象无法修改属性，那计数器的数字为什么会变化。理解这个问题是非常重要的，所以先举个小例子：

现实生活中，一只狗自诞生那一刻，毛色属性就无法修改。 有一天，你去小明家，站在一只白狗面前。 小明对你说: “你把眼睛闭上。” 过一会你睁开眼，看到面前有一只黑狗。 那么，你是否会惊奇的认为，自己的闭眼操作会改变一只狗的毛色。 (其实只是小明换了一只体型一样的黑狗)

同理，计数器项目中，你点击按钮时，数字从 0 -> 1。并不是 Text("0") 的文字属性变成了 1，而是你面前的是一个新的 Text("1") 对象。数字需要在交互时发送变化，但不能再 Widget 类中变化，所以 Flutter 框架中，提供了一个状态数据维护的场所： State 的衍生类。它可以提供 setState触发重新构建，从而更新界面呈现。

4.组件有无状态的差异性

对于新手而言，自己创建 Widget 的派生类，有两个选择。其一是继承自 StatelessWidget ， 其二是继承自 StatefulWidget， 两者都可以通过已有的组件完成拼装的构建逻辑。

StatelessWidget 派生类是很简单直接的，它在 build 方法中通过已有组件来完成构建逻辑，返回 Widget 对象。 界面上需要什么，就在构造函数中传什么。相当于一个胶水，把其他组件黏在一块，作为新的组件个体。

StatefulWidget 和 StatelessWidget 在功能上是类似的，只不过 StatefulWidget 自己不承担 build 组件的责任，将构建任务委托给 State 派生类。它会通过 createState 方法创建 State 对象：

在上一点中提到，State 派生类中可以维护状态数据的变化和重新触发自己的 build 构建方法，实现界面的更新。另外，State 对象有生命周期回调，可以通过覆写方法进行感知。

需要注意一点: 不要将 StatefulWidget 和 State 混为一谈，两者是不同的两个类型。可以感知生命周期、维护状态数据变化的是 State 类。 StatefulWidget 的任务是承载配置信息，和创建 State 对象。

二、 技能点

虽然说界面上展示的内容都是通过 Widget 确定的，但 Flutter 中除了 Widget 还有很多其他的类型对象。它们在一起共同工作，维护界面世界的运转。

1. 回调函数的使用

函数本身可以视为一个对象，作为函数的参数进行传递，这样可以在一个类中，很方便地感知另一个对象事件的触发。比如在 _GuessPageState 类中，使用 FloatingActionButton 组件，它的入参 onPressed 是一个函数，这个函数是由框架内部在恰当的时机触发的，这个时机就是点击。

也就是说，点击会触发 onPressed 参数传入的函数对象，这样我们就可以方便地 监听到 事件，并处理数据变化的逻辑。这种函数，就称之为 回调函数 。既然函数要作为对象传递，那最好要有类型名，可以通过 typedef 让函数有用类名：

比如， FloatingActionButton 的 onPressed 参数类型是 VoidCallback ，定义如下：表示一个无参的返回值为空的函数。

typedef VoidCallback = void Function();

AnimatedBuilder 组件的 builder 参数也是一个回调函数，类型为 TransitionBuilder ，定义如下：表示一个返回值为 Widget, 两个入参分别是 BuildContext 和 Widget? 的函数。

typedef TransitionBuilder = Widget Function(BuildContext context, Widget? child);

2. 动画控制器的使用

动画控制器是界面可以进行动画变化的驱动力，使用过程分为三步: 创建动画控制器、 在合适时机启动控制器、使用动画器的值构建界面

1.创建动画控制器主要在 State 派生类中进行：让 State 派生类混入 SingleTickerProviderStateMixin 后，将状态自身作为 AnimationController 的 vsync 入参：

class _GuessPageState extends State<GuessPage> with SingleTickerProviderStateMixin{
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );
  }

2.在恰当的时机可以通过 AnimationController 的 forward 方法启动控制器。让它的值从 0 变化到 1 ：

controller.forward(from: 0);

3.根据动画控制器的值，设置需要动画变化的属性。由于动画的触发非常频繁，推荐使用 AnimatedBuilder 监听控制器，实现局部组件的更新和构建：

3. 随机数的使用

Dart 内部提供了 Random 类，因此获取随机数就非常方便。只要创建 Random 对象，提供 nextInt 就可以得到 0 ~ 100 的随机整数 (不包括 100) ：

Random _random = Random();
_random.nextInt(100);

另外，可以通过 nextDouble 方法获取 0 ~ 1 的随机小浮点数 (不包括 1) ；通过 nextBool 方法获取随机的 bool 值：

三、接触的内置组件

最后来整理一下目前猜数字项目中用到的 Flutter 内置组件，大家可以根据下表，结合源码以及应用界面，思考一下这些组件的作用和使用方式：

1. 基础组件

基础组件是常用的简单组件，功能单一，相当于积木的最小单元：

2. 组合结构型

有些组件是比较复杂的，在构造中可以配置若干个组件，作为各个部分。比如 AppBar 可以设置左中右下四个区域，Scaffold 可是设置上中下左右，它们像躯干一样，把布局结构已经固定了，只需将组件插入卡槽中即可。

3. 布局组件

布局组件无法在界面上进行任何色彩的展示，它们的作用是对其他组件进行排布与定位。比如 Row 和 Column 用于水平和竖直排列组件；Stack 让若干组件叠放排布；Center 可以将子组件居中。

4. 构建器

构建器是指，通过该组件回调来完成构建组件的任务。也就是说回调触发时会进行重新构建，从而让构建缩小在局部。

到这里，猜数字的项目就总结完了，希望大家可以好好思考和体会，下面将进入 电子木鱼 的模块。