
                            
                            因收到Google相关通知，网站将会择期关闭。相关通知内容
                            
                            
                            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 语法使用练习的好机会，在完成需求的过程中，会收获一些技能点。


回调函数的使用
动画控制器的使用
随机数的使用


界面交互和需求分析就到这里，下面一起开始第一个小项目的学习吧！

                        
                        
                            