Flutter开发者

自定义View番外篇

2018-11-05

上期回顾

在前面的文章中我们学习了自定义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来绘制文字
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章