Flutter 133: 图解自定义 ACEWaterButton 水波纹按钮

    小菜想自定义一个水波纹按钮，即默认向外扩散的水波样式；实现方式有很多种，小菜尝试最基本的 AnimationController 逐层绘制来处理，小菜简单记录一下尝试过程；

ACEWaterButton

    小菜画了一个简单的图如下，预期的水波纹按钮包括两层，以中心圆(蓝色)为基础逐步向外围扩散至(绿色)，并循环重复；

1. 内置圆

    小菜以此分为两步，第一步先绘制内置圆和内置图标，小菜提供了 innerSize 和 innerIcon 属性以方便内置圆的样式自定义；通过 ClipOval 裁切一个完整的内置圆；

    其中需要注意的是，内置圆应置于外围圆的中心，因此小菜添加一个 outSize 属性限制外围圆尺寸，同时默认设置 innerSize = 48.0，若未设置 outSize，则以 innerSize * 2 为默认值；

Container(
    width: widget.outSize ?? widget.innerSize * 2,
    height: widget.outSize ?? widget.innerSize * 2,
    child: widget.innerIcon == null
        ? Container() : Center(child: ClipOval(
                child: Container(
                    width: widget.innerSize,
                    height: widget.innerSize,
                    color: widget.color,
                    child: widget.innerIcon))))

2. 水波纹

    小菜预想实现水波纹效果则必然离不开 Animation 动画，使用动画方式也有多种，可以继承 AnimatedWidget 也可以使用 AnimationController 自定义动画样式；

    小菜预期水波纹不仅范围逐渐变大，并且在扩散过程中透明度逐渐降低，至外围最大范围为止消失；小菜采用最基本的 CustomPainter 自定义 Canvas.drawCircle，根据时间进度来逐层绘制水波纹；

2.1 透明度

    小菜使用 Paint 绘制时根据 AnimationController.value 进度逐步设置 color.withOpacity 透明度逐渐变低；

Paint _paint = Paint()..style = PaintingStyle.fill;
_paint..color = color.withOpacity(1.0 - progress);

2.2 外围圆

    外围圆主要是根据 AnimationController.value 进度逐步进行半径的更新；小菜预期的水波纹范围只有默认的内置圆到外围圆的范围渐变，因此变动范围为 (outSize - innerSize) * 0.5 * progress，同时起始位置为内置圆，因此初始半径应再加上内置圆半径；

double _radius = ((outSize ?? innerSize * 2) * 0.5 - innerSize * 0.5) * progress + innerSize * 0.5;
canvas.drawCircle(Offset(size.width * 0.5, size.height * 0.5), _radius, _paint);

    小菜在测试过程中也尝试了其他的扩展范围，若起始位置为中心则无需添加内置圆半径；若想增大或见效水波纹范围可以自由调整 AnimationController.value 进度范围；

// 中心点扩展
double _radius = innerSize * 0.5 * progress;
// 增大扩展范围
double _radius = innerSize * 2 * progress;

class ACEWaterPainter extends CustomPainter {
  final double progress;
  final Color color;
  final double innerSize;
  final double outSize;

  Paint _paint = Paint()..style = PaintingStyle.fill;

  ACEWaterPainter(this.progress, this.color, this.innerSize, this.outSize);

  @override
  void paint(Canvas canvas, Size size) {
    _paint..color = color.withOpacity(1.0 - progress);

    double _radius =
        ((outSize ?? innerSize * 2) * 0.5 - innerSize * 0.5) * progress + innerSize * 0.5;

    canvas.drawCircle(Offset(size.width * 0.5, size.height * 0.5), _radius, _paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

3. 小反思

3.1 内置圆是否可缺省？

    小菜在通过 ACEWaterPainter 绘制水波纹过程中，起始位置从内置圆开始，那是否可以省略第一步的内置圆呢？

    暂时先不缺省，因为小菜在设置水波纹扩散过程中，同时设置了透明度的渐变，若缺省内置圆会影响 innerIcon 的展示效果；但内置圆绘制位置可以调整，也可以在 ACEWaterPainter 中进行绘制；

3.2 shouldRepaint 是否需要一直重绘？

    ACEWaterPainter 中是否需要一直重绘；在使用自定义 Paint 委托类创建新的 CustomPaint 对象时若新实例与旧实例不同，则应返回 true，否则应返回 false；因此在水波纹过程中，小菜默认设置为 true 进行重绘；

---

    ACEWaterButton 案例源码

---

    小菜对 ACEWaterButton 水波纹按钮的简单效果已满足，但还不够完善，对于重绘的机制还需要优化；如有错误，请多多指导！

来源： 阿策小和尚