第一百四十九回 自定义组件三

我们在上一章回中介绍了 自定义组件相关的内容，本章回中将继续介绍这方面的内容.闲话休提，让我们一起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组件的其它属性。

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