learn-tech/专栏/Flutter入门教程/12电子木鱼界面交互与需求分析.md

                        因收到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

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