自定义View番外篇

上期回顾

在前面的文章中我们学习了自定义View的基本用户，并且结合动画等相关知识给大家举了几个例子。

当然也有很多童鞋在后台留言说，每次自定义View都需要使用CustomPaint来包裹我们自定义的CustomPainter是不是有点多余和麻烦了？有没有其他的方法可以简单点？

其实，方法是有的，但是并不意味着这样做就比CustomPaint简单，也并不是意味着CustomPaint就很多余，其实上CustomPaint是Flutter给我们做了一层封装，为了就是让我们使用起来更加的方便。

既然说到不使用CustomPaint来做自定义View，我们就来看下如何来做吧。

SingleChildRenderObjectWidget

点开CustomPaint的源码，我们可以发现CustomPaint是继承于SingleChildRenderObjectWidget的。

既然CustomPaint可以直接使用肯定是因为继承于SingleChildRenderObjectWidget哦，所以 我们也可以让我们自定义View直接继承于SingleChildRenderObjectWidget来看下。

使我们的View继承于SingleChildRenderObjectWidget会默认实现一个createRenderObject方法，会让你返回一个RenderConstrainedBox，这个对象就是负责对你Widget的绘制和布局。

handleEvent用来处理用户触摸事件 hitTestSelf 相应事件是否是当前View，用来处理事件的分发 paint 用来对Vidget进行绘制

至于前两个方法，我们现在不做关心和处理，我们只需要处理paint 进行绘制即可。

当然，绘制的方法和在CustomPainter中是一样的。

比如我们来绘制一个圆

我们在使用的地方直接使用CircleView即可。

TextPainter

在前面的文章中我们提到过Canvas不能直接绘制文字，但是不代表我们不能绘制文字，今天我们就借助于TextPainter来看下如何绘制文字。

当然，我们这里还是借助于SingleChildRenderObjectWidget来完成自定义Widget的绘制，当然我们依然可以使用CustomPaint来完成绘制。

首先我们声明字体的颜色

我们申明字体的样式，来修改字体大小、字号、字体样式等等

使用TextSpan来声明要绘制的文字

使用TextPainter来构建绘制文字的painter

最后绘制文字。

小结

• 借助于SingleChildRenderObjectWidget完成自定义Widget
• 使用TextPainter来绘制文字