用Flutter做桌上弹球(绘图（Canvas&CustomPaint）API)

本文是Flutter中Canvas和CustomPaint API的使用实例。结合动图演示，列出最终目标如下：。接下来，我们逐步实现功能拆解中所列举的6个具体功能。对于透明度，0表示完全透明，255表示完全不透明。要生成随机位置，方法依然是使用Random类，但要注意随机值范围。坐标值分别小于屏幕横向尺寸和纵向尺寸。小球的绘制工作主要在继承了CustomPainter的类中。这里面，calculateMoveAngle()和startMove()方法分别对应初始运动方向生成器以及开始运动并定期更新UI的方法。因为只有小球的运动，才能让人感到界面在“更新”。但很快，它将移出屏幕。显然，小球每前进一步，都要做屏幕边界判定，以防小球移出屏幕范围。最后，配合用户手势及相关的布尔变量，在每次刷新小球位置时实现变色和暂停移动。到此，程序全部实现完成。