154 lines
4.0 KiB
Markdown
154 lines
4.0 KiB
Markdown
|
||
|
||
因收到Google相关通知，网站将会择期关闭。相关通知内容
|
||
|
||
|
||
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
|
||
|
||
|
||
界面交互和需求分析就到这里，下面一起开始第二个小项目的学习吧！
|
||
|
||
|
||
|
||
|