169 lines
3.5 KiB
Markdown
169 lines
3.5 KiB
Markdown
|
||
|
||
因收到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 语法使用练习的好机会，在完成需求的过程中，会收获一些技能点。
|
||
|
||
|
||
回调函数的使用
|
||
动画控制器的使用
|
||
随机数的使用
|
||
|
||
|
||
界面交互和需求分析就到这里，下面一起开始第一个小项目的学习吧！
|
||
|
||
|
||
|
||
|