06 猜数字界面交互与需求分析
1. 界面交互介绍
猜数字是本教程的第一个案例，功能比较简单，非常适合新手朋友入门学习。下面是两个最基础的交互：
- 点击按钮生成 0~99 的随机数，并将随机数密文隐藏。
- 头部的输入框，点击时弹出软键盘，可输入猜测的数字。
| 点击生成随机数 | 可输入文字 |
|---|---|
 |
 |
如下所示，点击右上角的运行按钮，可以比较输入猜测值和生成值的大小，并在界面上通过两个色块进行提示。每次比较时，提示面板中的文字会有动画的变化，给出交互示意。
| 比较结果：小了 | 比较结果：大了 |
|---|---|
 |
 |
这三个交互就是本案例的所有功能需求。你可以找几个朋友一起玩这个猜数字的小游戏，比如随机生成一个数后，每人输入一个数，最后猜中的人获取胜利。其中控制猜测的范围，使其更利于自己猜出结果，也是一点斗智斗勇。
2. 猜数字需求分析
现在从数据和界面的角度，来分析一下猜数字中的需求：
- 随机数的生成
随机数生成的需求中，有两个需要变化的数据，其一是待猜测的数字 _value 的赋值；其二是游戏的状态 _guessing 置为 true。
int _value = 0;
bool _guessing = false;
对于界面来说，当生成随机数后，要禁用按钮。也就是说按钮的表现形式，会受到 _guessing 数据的限制。
同样，中间数字的显示也会受到 _guessing 的影响，猜测过程中为密文；猜对之后游戏结束，展示明文数字。
| 游戏进行中 | 游戏结束 |
|---|---|
 |
 |
- 输入框的输入功能
输入框输入需求中，需要一个数据来记录输入的内容。一般使用 TextEditingController 类型的数据和输入框进行双向绑定：也就是说用户的输入会导致控制器数值的变化，控制器数值的修改也会导致输入框内容的变化。
TextEditingController _guessCtrl = TextEditingController();
- 猜测需求分析
猜测需求中，需要一个数据表示猜测结果；猜测结果有三种：大了、小了和相等，这里使用一个可空的 bool 类型对象 _isBig 表示三种状态:
bool? _isBig;
null: 相等
true: 大了
false: 小了
对于界面来说，需要根据 _isBig 的值，给出提示信息。其中 大了和小了的展示面板叠放在主题界面之上，占据一般的高度空间：
| 大了 | 小了 | 相等 |
|---|---|---|
 |
 |
 |
需求中的功能和数据这里简单地分析了一下，最后来说一下本案例中蕴含的知识点。
3. 猜数字中的知识点
首先，猜数字项目会接触到如下的常用组件，大家再完成猜数字项目的同时，也会了解这些组件的使用方式。
另外，会对 Flutter 中的界面相关的知识有初步的认知：
- 组件与界面的关系
- 界面构建逻辑的封装
- 状态数据与界面更新
- 组件有无状态的差异性
最后，在逻辑处理的过程中，是对 Dart 语法使用练习的好机会，在完成需求的过程中，会收获一些技能点。
- 回调函数的使用
- 动画控制器的使用
- 随机数的使用
界面交互和需求分析就到这里，下面一起开始第一个小项目的学习吧！