首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义View案例【CircleProgressBar】

自定义View案例【CircleProgressBar】

作者头像
flyou
发布2018-12-06 17:02:28
1K0
发布2018-12-06 17:02:28
举报
文章被收录于专栏:flutter开发者flutter开发者

上期回顾


在前面的文章中我们看了下如何通过自定义View简单实现了labelView的效果,其实实现起来非常的简单,就是根据用户传递来的参数来做不同的绘制而已。

但是我们实现的LabelView是不能动态更改的,一来是受制于这个Widget的功能,而来就是因为没有跟动画结合啊。

今天我们就通过自定义圆形进度条来讲下自定义View与动画结合的例子。

CircleProgressBar原型进度条


还是先来看下效果吧:

也可能是这个样子:

我们可以根据需要更改进度的背景颜色、进度条颜色以及进度圆环的宽细、文字的样式等等。

话不多说,还是来一步一步看看如何实现吧。

CustomPainter

我们还是先来想想使用canvas的哪个方法来完成绘制。

首先,我们需要绘制一个圆形的背景啊,所以肯定要使用canvas.drawCircle方法。

其次,我们需要绘制圆上面的圆弧,所以就是canvas.drawArc方法了啊。

所以,我们先来绘制一个圆来看效果哈

然后,我们尝试在相同的位置再绘制一段圆弧

这样一来我们就基本上完成了我们最基本的圆形进度条哈

构造方法抽取


还是需要回到第一个问题,要有哪些功能,那些参数需要暴露出去

属性

作用

_strokeWidth

圆弧宽度

_backgroundColor

进度条背景颜色

_foreColor

进度条前景颜色

_startAngle

进度开始的角度

_sweepAngle

扫过的角度

_endAngle

结束的角度

相信大家还能记得弧度和角度的换算方式,如果不记得话去找下初中数学老师叙叙旧哈。

可以看到,我们的CircleProgressBarPainter可以根据用户传入的参数来完成不同颜色、大小弧度的计算,圆以及圆弧的半径由Size宽和高最小值的二分之一决定。

这个一来我们就可以在调用的地方这样写

这样一来,只要我们更改这里的参数,这个圆弧的显示就会改变。但是却不能动态改变,要想要动态改变还是需要借助于动画的。

结合动画


首先我们建立CurvedAnimation使用减速的插值器来模拟减速效果。然后结合Animation实现数值的变化

然后把变化的值处理后赋给CircleProgressBarPainter的_sweepAngle即可。

文字显示


当然,在平时的使用中有时候我们是需要在中间显示文字提示的,比如百分比或者数值完成情况,这个时候我们就可以利用CustomPaint的child来实现。

当然,为了文字居中我们可以在外层包裹一个Center。

为了对动画的时长控制,同样的在构造方法可以选择传入动画的时长,为了控制文字是显示百分比或者数值比我们也可以选择传入传入参数,也可以选择性传入参数控制文字的style。

CircleProgressBar的构造方法:

可以看到只有SIze属性是必填参数,其他的参数都是可选的哦。

属性

作用

size

尺寸

backgroundColor

进度条背景颜色

foreColor

进度条前景颜色

duration

动画时长

strokeWidth

圆弧宽度

textStyle

文字风格

startNumber

开始的数字

maxNumber

结束的数字

textPercent

是否使用百分比

在调用的地方就非常的简单了

代码稍微有点才,阅读不便,就把完整代码放在github了。

完整代码:https://github.com/flyou/circle_progress_bar

到这里基本上就完成了这个圆形进度条效果,但是却也没有结束,因为确实还有许多很多继续改进的,比如进度条颜色随着动画改变,圆形内水波纹上升效果等等。

那么为什么不做啊?没有必要,主要还是(我懒!!!)让大家掌握如何使用。

小结

  • 熟悉并掌握绘制圆形、圆弧的方法
  • 熟悉动画与Widget结合的使用
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-10-29,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 flutter开发者 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 上期回顾
  • CircleProgressBar原型进度条
    • CustomPainter
    • 构造方法抽取
    • 结合动画
    • 文字显示
    • 小结
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档