如何用Flutter做桌上弹球-创新互联

这篇文章主要讲解了如何用Flutter做桌上弹球，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

首先看一下我们要实现的效果：

结合动图演示，列出最终目标如下：

• 在程序运行后，显示一个小球；
• 每次程序启动后，小球的样式均发生随机性变化，体现在大小、颜色和位置三点；
• 小球运行的规律参考桌球或三维弹球游戏；
• 单击屏幕，小球变色；
• 双击屏幕，小球暂停/恢复运动；
• 长按屏幕，小球开始/停止自动变色。

运用的主要技术点：Canvas和CustomPaint API。

运行平台：Android、iOS

源码地址：
Github Gitee

功能拆解

首先拆解前文中所列出的6个实现目标，显而易见，要实现它们，我们需要：

1. 随机颜色生成器；
2. 随机位置生成器；
3. 随机尺寸生成器；
4. 小球绘制逻辑；
5. 小球运动逻辑：

边界判定；
初始运动方向生成器；
定向移动位置更新器。

1. 用户手势监听器。

功能实现

接下来，我们逐步实现功能拆解中所列举的6个具体功能。

随机颜色生成器

随机颜色生成器在程序启动、单击屏幕和自动变色中使用。在Flutter中，我们可以通过Color类对红、绿、蓝和透明度分别定义，来定义某个唯一的颜色，数值范围是0-255。对于透明度，0表示完全透明，255表示完全不透明。
对于随机数值，我们使用Random类生成0-255之间的随机整数。
随机颜色生成器则主要使用上述两个类来实现，具体代码片段如下：

Color _color = Color.fromARGB(0, 0, 0, 0);

// 改变小球颜色
void changeColor() {
	_color = Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),Random().nextInt(255));
}