我们在上一章回中介绍了 自定义组件相关的内容,本章回中将继续介绍这方面的内容.闲话休提,让我们一起Talk Flutter吧。
知识回顾
我们在上一章回中介绍了如何使用画布和画笔来绘制不同的内容,进而实现自定义组件中特有的效果,不过这些组件只能看,不能响应事件,本章回中介绍如何在自定义组件时响应事件。响应事件需要使用GestureDetector
组件,本章回将介绍如何把该组件和自定义组件关联起来。
实现方法
如果想让自定义的组件可以响应组件,那么需要在自定义的组件外层嵌套一个GestureDetector组件,这个是整体的思路,下面介绍具体的实现方法:
- 把GestureDetector组件当作自定义组件的根组件;
- 给GestureDetector组件的child属性赋值,该值最好是容器类组件,便于控制事件范围;
- 给容器事件添加子组件,也就是我们自定义的组件;
这个方法比较抽象,在下面的小节中,我们通过具体的示例代码来演示。
示例代码
GestureDetector(
onPanUpdate: _onPanUpdate,
///手势事件限制在这个容器内,
child: Container(
width: 100,
height: 200,
child: CustomPaint(
painter: CustomPainter(),
size: Size(50,50),
),
),
);
在上面的示例代码中,组件树的根是GestureDetector
组件,它的子组件是Container
这个容器组件,而容器组件的子组件才是我们自定义的组件,这个代码和上面的实现方法完全匹配。
此外,示例代码中自定义的组件目前只响应拖动事件,也就是onPanUpdated
属性对应的内容,我们将它封装成了独立的方法,方法的实现就不演示了。如果大家想让自定义的组件响应其它类型的事件,可以使用GestureDetector
组件的其它属性。
看官们,与"自定义组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!