12 电子木鱼界面交互与需求分析
1. 界面交互介绍
电子木鱼是本教程的第二个案例，相比于猜数字项目，功能需求比较复杂一点，适合新手朋友进一步了解 Flutter 相关知识。下面是两个最基础的交互：
- 点击木鱼图片发出敲击声，并增加功德，展示增加动画。
- 点击标题栏右侧按钮，近进入功德记录页面。
| 点击木鱼 | 查看功德记录 |
|---|---|
 |
 |
光是点击图片发出音效未免有些单调，这里提供了两个选择功能，让应用的表现更丰富一些。
- 点击右上角按钮，选择木鱼音效
- 点击右上角按钮，选择木鱼样式
| 切换音效 | 切换样式 |
|---|---|
 |
 |
2. 电子木鱼需求分析
现在从数据和界面的角度，来分析一下猜数字中的需求：
- 木鱼点击发声及功德记录
在这个需求中，在每次点击时，需要产生一份记录数据，并将数据添加到列表中。这份记录数据包括 增加量、记录时间、当前音频、当前图片 四个数据。所以可以将四者打包在一个类中作为数据模型，比如定义 MeritRecord 类型：
class MeritRecord {
final String id;
final int timestamp;
final int value;
final String image;
final String audio;
MeritRecord(this.id, this.timestamp, this.value, this.image, this.audio);
Map<String, dynamic> toJson() => {
"id":id,
"timestamp": timestamp,
"value": value,
"image": image,
"audio": audio,
};
}
对于界面来说，当功德记录发生变化时，触发当前功德的展示动画，功德数字会进行透明度、移动、缩放的叠加动画；进入功德详情页是，功德记录列表的数据将被传入其中，作为界面构建时的数据信息。由于数据量会很多，所以视图需要支持滑动。
- 音效和样式的选择
这两个需求的操作流程是类似的。拿音频来说，需要的数据有：支持的音频列表，列表中的每个元素需要有名称和资源两个数据，也可以通过一个类进行维护：
class AudioOption{
final String name;
final String src;
const AudioOption(this.name, this.src);
}
有了支持的列表数据，还需要当前激活的数据，这里维护 int 型的激活索引，即可通过列表获取到激活数据。对于木鱼样式来说也是一样，通过一个类型维护每种样式需要的数据:
class ImageOption{
final String name; // 名称
final String src; // 资源
final int min; // 每次点击时功德最小值
final int max; // 每次点击时功德最大值
const ImageOption(this.name, this.src, this.min, this.max);
}
对于界面来说，需要处理按钮的点击事件，从底部弹出选择的面板，在选择之后隐藏。选择面板中根据数据列表展示可选项，并根据激活索引控制当前的激活状态。
3. 电子木鱼中的知识点
首先，电子木鱼项目会 额外 接触到如下的常用组件，大家再完成电子木鱼项目的同时，也会了解这些组件的使用方式。
另外，会对 Flutter 中的界面相关的知识有进一步的认知：
- 数据模型与界面展示
- 组件的封装性
- State 状态类的生命周期回调
- 组件有无状态的差异性
- 界面的跳转
最后，Flutter 中可以依赖别人的类库完成自己项目的某些需求，将在电子木鱼项目中了解依赖库的使用方式。通过多种动画变换的使用，也可以加深对动画的理解。
- 资源配置与依赖库的使用
- 多种动画变换
- 短音效的播放
- 唯一标识 uuid
界面交互和需求分析就到这里，下面一起开始第二个小项目的学习吧！