第一百四十七回 自定义组件一

我们在上一章回中介绍了跟手指移动的小球相关的内容，本章回中将介绍 自定义组件.闲话休提，让我们一起Talk Flutter吧。

概念介绍

在项目中有些内容无法通过现有的组件来实现，因此需要自定义组件，自定义组件通常分为两大类：

• 组合已经有的组件形成新的组件；
• 重新绘制组件；

组合已经有的组件我们没有专门介绍过，不过有类似的内容，比如前面章回中实现的阴影就可以看作是通过组合已经有的组件形成新的组件，它组合了Text和BoxShadow组件，形成了带阴影的文字组件。我们在本章回中主要介绍的是重新绘制组件。

实现方法

重新绘制组件需要使用两个组件：CustomPaint组件和CustomPainter组件，因此我们首先介绍一下这两个组件：

• CustomPainte组件相当于是一个画布，它主要用来创建画布，它提供了size属性来控制画布的大小；
• CustomPainter组件相当于画笔，组件中需要的内容主要通过它来实现，它是一个抽象类，我们需要实现它的Paint()方法，所有绘制的内容都是在这个方法中完成的。
• 绘制组件时创建画笔对象，并且把它赋值给画布的painter属性，这样就把画笔和画布关联在了一起。

示例代码

CustomPaint(
  painter: RockerPainter(outerRadius,Colors.blue),
  size: Size(100,100),
),

class RockerPainter extends CustomPainter{
  ///offset表示圆的圆心与(0,0)的偏移距离,其值等于半径
  final Color _color;
  final double radius = size;
  Offset _offset = Offset.zero;


  RockerPainter( this.radius,this._color);

  ///参数中的size就是包含类的CustomPaint中指定的size
  @override
  void paint(Canvas canvas,Size size) {
    Paint paint = Paint()
      ..color = _color
      ..strokeCap = StrokeCap.round
      ..isAntiAlias = true
      ..strokeWidth = 2.0;

    ///圆的半径由参数指定
    _offset = Offset(radius, radius);

    ///画圆：第一个参数指定Offset,表示圆的左上角为基准进行偏移而不是以圆心为基准
    canvas.drawCircle(_offset,radius,paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }
}

我们在上面的示例代码中，自定义了个圆形，圆形的大小和颜色可以通过参数指定。该代码中结合了综合使用了CustomPaint组件和CustomPainter组件。

编译并且运行上面的程序，可以看到一个半径为100的蓝色圆形，我在这里就演示程序的运行结果了，建议大家自己动手去实践。

看官们，与"自定义组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!