自定义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来绘制文字

本文分享自微信公众号 - flutter开发者(Flutter_Developers)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

14940
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

39950
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

24800
来自专栏吴裕超

vue .sync修饰符的使用

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显...

20920
来自专栏xingoo, 一个梦想做发明家的程序员

【前端开发系列】—— CSS3属性选择器总结

想想自己为什么要学CSS,作为一个开发过前端的人员来说,调试一个图片花了半天的时间,最后发现分隔符用错了,实在是一件很丢人的事情。因此,痛下决心来学习CSS,...

23270
来自专栏九彩拼盘的叨叨叨

CSS伪元素介绍

伪元素表示了某个元素的子元素。这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。

9240
来自专栏向治洪

Markdown对应Yelee主题语法

概述 这里说的是Yelee主题的语法和原生语法是有些区别的;更多的基础语法可以到Cmd Markdown上面去查看;但是我觉得都会各有不同吧 注意这里说的不是真...

20760
来自专栏小李刀刀的专栏

动态实现指定图片半透明及鼠标事件

说明:在不改变HTML代码的前提下,通过CSS和JavaScript,对指定的图片实现半透明效果。并为该图片添加鼠标滑过和滑出特效。 具体实现: 1.假设我们要...

33490
来自专栏前端小叙

动态添加的html元素绑定事件的方法

在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多,可以考虑使用方法二;

15340
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

67030

扫码关注云+社区

领取腾讯云代金券