10 KiB
因收到Google相关通知，网站将会择期关闭。相关通知内容
14 计数变化与音效播放
1. 组件点击事件的监听
计时器项目中的 FloatingActionButton 按钮，猜数字项目中的 IconButton 点击事件，都是通过构造中的 onPressed 参数传入函数，执行相关逻辑。我们称这种以函数对象作为参数的形式为 回调函数 。现在我们的需求是：让图片可以响应点击事件，每次点击时功德数随机增加 1~3 点，并发出敲击的音效。
———————————————————— ————————————————————
如下所示，在 MuyuAssetsImage 中使用 GestureDetector 嵌套在 Image 之上，这样图片区域内的点击事件，可以通过 onTap 回调监听到。另外，点击时功德累加的逻辑，和图片构建并没有太大关系，这里通过 onTap 入参，将事件向上级传递，交由使用者处理。
class MuyuAssetsImage extends StatelessWidget { final String image; final VoidCallback onTap;
const MuyuAssetsImage({super.key, required this.image, required this.onTap});
@override Widget build(BuildContext context) { return Center( child: GestureDetector( // 使用 GestureDetector 组件监听手势回调 onTap: onTap, child: Image.asset( image, height: 200, ), ), ); } }
通过 GestureDetector 组件的 onTap 参数，可以监听到任何组件在其区域内的点击事件。
在 _MuyuPageState#build 方法中，使用 MuyuAssetsImage 组件时，通过 onTap 参数指定逻辑处理函数，这和 FloatingActionButton的onPressed 点击事件本质上是一样的。这里通过 _onKnock 函数处理点击木鱼的逻辑：
---->[_MuyuPageState#build]---- Expanded( child: MuyuAssetsImage( image: 'assets/images/muyu.png', onTap: _onKnock, ), ),
在 _MuyuPageState 中维护界面中需要的状态数据，这里最主要的是功德计数变量，通过 _counter 进行表示。另外，点击时功德数随机增加 1~3 ，需要随机数对象。这样，目前的逻辑就比较清晰了：在 _onKnock 函数中，对 _counter 进行累加即可，每次累加值为 1 + _random.nextInt(3) :
int _counter = 0; final Random _random = Random();
void _onKnock() { setState(() { int addCount = 1 + _random.nextInt(3); _counter += addCount; }); }
最后，将 _counter 作为上半界面 CountPanel 的入参即可。这样点击时，更新 _counter 后，会重新构建，从而展示最新的数据。到这里本质上和计数器没有太大的差异：
当前代码位置 muyu
- 插件的使用和配置
Flutter 是一个跨平台的 UI 框架，而音效的播放是平台的功能。在开发过程中，一般使用 插件 来完成平台功能。得益于 Flutter 良好的生态环境，在 pub 中有丰富的优秀插件和包。这里使用 flame_audio 插件来实现短音效播放的功能：
使用插件，首先要在 pubspec.yaml 的 dependencies 节点下配置依赖，在 pub 中的 installing 页签中，可以看到依赖的版本号：
如下所示，加入依赖后，点击 pub get 获取依赖包：
现在要播放音效，首先需要相关的音频资源，而使用本地资源，需要在 pubspec.yaml 中进行配置：这里准备了三个木鱼点击的音效，放在 audio 文件夹中。
- 完成点击播放音效功能
点击事件的逻辑处理在 _MuyuPageState 类中，所以播放音效在该类中处理比较方便。插件的使用也比较简单，首先需要加载资源，通过 FlameAudio.createPool 方法创建 AudioPool 对象。在状态类的 initState 方法中使用 _initAudioPool 创建 pool 对象。
其中第一个参数是资源的名称，flame_audio 默认将本地资源放在 assets/audio 中，指定资源时直接写文件名即可。
---->[_MuyuPageState]---- AudioPool? pool;
@override void initState() { super.initState(); _initAudioPool(); }
void _initAudioPool() async { pool = await FlameAudio.createPool( 'muyu_1.mp3', maxPlayers: 4, ); }
然后，只需要在 _onKnock 方法在调用 pool 的 start 方法进行播放即可：
void _onKnock() { pool?.start(); // 略同... }
到这里，点击木鱼时，就可以听到敲击木鱼的音效，同时功德数也会随机增加 1~3 点。这样就完成了木鱼最基础的功能需求，下面我们将继续优化和拓展，添加一些新的视觉表现和功能。
当前代码位置 muyu
- 增加功德时的动画展示
如下所示，现在需要在每次点击时展示功德增加的数字，并让数值有动画效果。比如这里是 缩放、移动、透明度 三个动画的叠加，从效果的表现上来说就是文字一边上移，一边缩小、一边透明度降低。
———————————————————— ————————————————————
首先来分析一下界面构建：界面上需要展示的信息增加了 当前增加的功德值 ，使用需要增加一个状态数据用于表示。这里使用 _cruValue 变量，该数据维护的时机也很清晰，在点击时更新 _cruValue 的值：
---->[_MuyuPageState]---- int _cruValue = 0;
void _onKnock() { pool?.start(); setState(() { _cruValue = 1 + _random.nextInt(3); _counter += _cruValue; }); }
这样数据层面就搞定了，下面看一下界面构建逻辑。这里 当前功德 相当于一个浮层，可以通过 Stack 组件和下半部分进行叠放。如下所示，文字从下向上运动到下半部分的顶部：
由于动画的逻辑比较复杂，这里封装 AnimateText 组件来完成动画文字的功能，其中构造函数传入需要展示的文本信息。下半部分通过 Stack 进行叠放，alignment 入参可以控制孩子们的对齐方式，比如这里 Alignment.topCenter ， 将会以上方中心对齐。表现上来说，就是文字在区域的上方中间：
现在数据和布局已经完成，就差动画效果了。在猜数字中我们简单地了解过动画的使用，通过 AnimatedBuilder 组件，监听动画控制器的变化，在构建组件的过程中让某些属性值不断变化。这里介绍一下几个 XXXTransition 动画组件的使用。
先拿 FadeTransition 组件来说，它的构造中需要传入 Animation 的动画器，表示透明度的动画变化。AnimationController 的数值运动是从 0 ~ 1 ，而这里透明度的变化是 1 ~ 0，此时可以使用 Tween 来得到期望的补间动画器。如下 tag1 处，创建了 1~0 变化的动画器 opacity 。在 build 中，使用 FadeTransition 传入 opacity 动画器，当动画控制器运动时，子组件就会产生透明度动画。
———————————————————— ————————————————————
class AnimateText extends StatefulWidget { final String text;
const AnimateText({Key? key, required this.text}) : super(key: key);
@override State createState() => _FadTextState(); }
class _FadTextState extends State with SingleTickerProviderStateMixin { late AnimationController controller; late Animation opacity;
@override void initState() { super.initState(); controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 500)); opacity = Tween(begin: 1.0, end: 0.0).animate(controller); // tag1 controller.forward(); }
@override void didUpdateWidget(covariant AnimateText oldWidget) { super.didUpdateWidget(oldWidget); controller.forward(from: 0); }
@override void dispose() { controller.dispose(); super.dispose(); }
@override Widget build(BuildContext context) { return FadeTransition( opacity: opacity, child: Text(widget.text), ); } }
当前代码位置 muyu
同理，使用 ScaleTransition 可以实现缩放动画；使用 SlideTransition 可以实现移动动：
@override Widget build(BuildContext context) { return ScaleTransition( scale: scale, child: SlideTransition( position: position, child: FadeTransition( opacity: opacity, child: Text(widget.text), )), ); }
XXXTransition 组件都需要指定对应类型的 Animation 动画器，而这些动画器可以以 AnimationController 为动力源，通过 Tween 来生成。 缩放变换传入 scale 动画器，从 1 ~ 0.9 变化；移动变化传入 position 动画器，泛型为 Offset，从 Offset(0, 2) ~ Offset.zero 变化，对应的效果就是：在竖直方向上的偏移量，从两倍子组件高度变化到 0 。
———————————————————— ————————————————————
class _FadTextState extends State with SingleTickerProviderStateMixin { late AnimationController controller; late Animation opacity; late Animation position; late Animation scale;
@override void initState() { super.initState(); controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500)); opacity = Tween(begin: 1.0, end: 0.0).animate(controller); scale = Tween(begin: 1.0, end: 0.9).animate(controller); position = Tween(begin: const Offset(0, 2), end: Offset.zero,).animate(controller); controller.forward(); }
5.本章小结
本章我们学习了如何在自己的项目中使用别人提供的类库，这样就可以很轻松地完成复杂的功能。比如这里点击时的音效播放，如果完全靠自己来写代码实现，将会非常困难。但使用别人提供的插件，几行代码就搞定了。所以说，对于一项技术而言，良好的生态是非常重要的。
你可以使用别人的代码实现功能，方便大家；也可以分享自己的代码以供别人使用，让大家一起完善，这就是开源的价值。到这里，就完成了增加功德数动画的展示效果，当前代码位置 muyu 。下一篇将继续对当前项目进行功能拓展，增加切换音效和木鱼图片的效果。