第二百六十七回

我们在上一章回中介绍了自定义组件相关的内容，本章回中将继承介绍这方面的内容.闲话休提，让我们一起Talk Flutter吧。

知识回顾

我们在上一章回中介绍自定义组件的概念和分类，重点介绍了如何使用CustomPaint和CustomPainter这两个组件重绘组件。本章回将在此基础上介绍一些细节，这些
细节隐藏在CustomPainter的canvas中，接下来我们将详细介绍它。

使用方法

上一章回中我们使用过CustomPainter的paint()方法，不过没有详细介绍它，该方法包含两个参数：

• Canvas参数：主要提供画布功能；
• Size参数：由CustomPaint组件传递，用来控制画布的尺寸；
  我们重点介绍Canvas类以及它提供的方法，它表示一个画布，并且提供了相关的方法来实现绘制功能，常用的方法如下：
• drawLine()方法：主要用来绘制直线；
• drawRect()方法：主要用来绘制矩形；
• drawOval()方法：主要用来绘制椭圆；
• drawArc()方法：主要用来绘制圆弧；
• drawCircle()方法：主要用来绘制圆形；
• drawImage()方法：主要用来绘制图片；
• drawPath()方法：主要用来绘制路径，功能十分强大；
  除了这些绘制方法外，还可以对画布本身进行平移，缩放，旋转，剪裁，对应的方法为：[translate], [scale], [rotate], [skew]。知道这些方法后，我们再
  介绍一下绘制的过程，过程只有三个步骤：保存当前画布，使用相关的方法绘制图形，恢复画布。在后面的小节中我们将通过示例代码来演示。
  在绘制图形时还需要使用画笔，Flutter提供了Paint类表示画笔，我们可以通过该类提了相关的属性来设置控制画笔，比如常用的画笔颜色，画笔宽度，画笔风格等，
  我在这里不一一列出了，大家可以查看Paint类的源代码或者使用点操作符来调用相关的属性。如果大家有Android原生开发的经验，那么就会发现这个paint()方法和
  Android中组件的onDraw()方法十分相似，比如几乎相同的canvas和paint.特别是canvas中的各种方法。因此，我就不做过多的介绍了。如果大家不知道这些内容
  的话，可以查看我在Android专栏中自定义View相关的内容。

示例代码

void paint(Canvas canvas, Size size) {
  Paint paint = Paint()
    ..color = Colors.blue;
    ..isAntiAlias = true
    ..strokeWidth = 2.0;

  canvas.save();
  Rect rect = Rect.fromLTWH(0, 0, size.width,size.height);
  canvas.drawRect(rect, paint);
  canvas.restore();
}

上面的示例代码中创建了一个蓝色画笔，然后使用drawRect()方法绘制了一个矩形。我在这里就不演示程序的运行结果了，建议大家自己动手去实践。此外，示例代码
中只演示了Canvas类的一种方法，大家可以尝试一下其它的方法，特别是DrawPath()方法，它的功能十分强大。这个就当作我留给大家的课后作业吧。
看官们，与"自定义组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!

第一百四十九回 自定义组件三
我们在上一章回中介绍了自定义组件相关的内容，本章回中将继续介绍这方面的内容.闲话休提，让我们一起Talk Flutter吧。

知识回顾

我们在上一章回中介绍了如何使用画布和画笔来绘制不同的内容，进而实现自定义组件中特有的效果，不过这些组件只能看，不能响应事件，本章回中介绍如何在自定义
组件时响应事件。响应事件需要使用GestureDetector组件，本章回将介绍如何把该组件和自定义组件关联起来。

实现方法

如果想让自定义的组件可以响应组件，那么需要在自定义的组件外层嵌套一个GestureDetector组件，这个是整体的思路，下面介绍具体的实现方法：

1. 把GestureDetector组件当作自定义组件的根组件；
2. 给GestureDetector组件的child属性赋值，该值最好是容器类组件，便于控制事件范围；
3. 给容器事件添加子组件，也就是我们自定义的组件；
   这个方法比较抽象，在下面的小节中，我们通过具体的示例代码来演示。

示例代码

GestureDetector(
  onPanUpdate: _onPanUpdate,
  ///手势事件限制在这个容器内，
  child: Container(
    width: 100,
    height: 200,
    child: CustomPaint(
          painter: CustomPainter(),
          size: Size(50,50),
        ),
    ),
);

在上面的示例代码中，组件树的根是GestureDetector组件，它的子组件是Container这个容器组件，而容器组件的子组件才是我们自定义的组件，这个代码和上面的
实现方法完全匹配。此外，示例代码中自定义的组件目前只响应拖动事件，也就是onPanUpdated属性对应的内容，我们将它封装成了独立的方法，方法的实现就不演示了。
如果大家想让自定义的组件响应其它类型的事件，可以使用GestureDetector组件的其它属性。
看官们，与"自定义组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!