写在前面
绘制,无论对前端还是客户端,都是一个老生常谈的话题。作为一个开发,我们很多时候并不能完全的依赖美工切图,给图。我们需要自己的工具和方法——绘制(Paint
)🖼。不知道有没有很多同学和我一样,刚开始接触绘制相关的代码部分时会有一些抵触或者说是恐惧,总觉得这一块非常的复杂、难写。不要急,今天我来带各位入门Flutter中的魔法🧙♂️——CustomPainter
。
准备阶段
- 今天的代码我不再使用编辑器编写,因为不涉及业务逻辑的处理🤓,我用DartPad给各位演示。当然各位也可以使用编辑器来展现自己的代码,但是我还是很推荐大家使用Flutter官方提供的这个DartPad的,它充分展示了Flutter强大的适配能力,而且方便、简洁👍🏻。
- 学习Flutter中的绘制,对Android出生的同学来说是比较友好的,😀因为实现方式基本上与Android是一模一样。但是各位!不要担心,我会站在萌新的角度给大家介绍,毕竟是一个基础教程。
魔法开始
咒语 1:打开+新建
好家伙,开局就是一波小高潮,直接打开DartPad
,左上角新建一个Flutter Pad
,创建一个简单的Container
嵌套,赋值Container
的颜色属性✅。
咒语 2:魔法初现👀
我们的定制魔法来了,我们给它起一个个性化的名字,各位随意,我就叫VanGoghPaint
,梵高的画。这幅画,就要继承我们今天的主角了——CustomPainter
。
大家可以看到,继承了
CustomPainter
之后,我们实现了父类的两个方法——paint
、shouldRepaint
。
paint
: 顾名思义,就是我们创作的地方,我们在paint
函数中尽情的创作,挥洒我们的笔墨🎉。shouldRepaint
:控制绘制的重绘,主要用于动画、刷新等功能,作为一节基础课,这里我们直接返回false
,不进行重绘了。
咒语的滑铁卢
此时,一大波兄弟眼疾手快,直接新建child
!加入VanGoghPaint()
!再接一个Run
!🚫民工三连,发现结果,是这样的...
蛤?图呢?怎么就剩一小块了?额...,兄弟们,事情是这样的~
CustomPainter
的祖先节点会默认的限制绘制区域的大小,如果你不设置的话,默认就是...0💡。所以嘛!给个大小就阔以了。其实这里,各位简单设置绘制上层Container
的大小就行了,一个简单的数值,就可以恢复显示效果。但是,DartPad的显示区域的大小随着 代码 UI的分栏线拖动,比例可以一直变化,所以这里我做了一个优化,获取父控件大小!🔧引入一个小控件——LayoutBuilder
,大家有兴趣可以去研究一下这个控件,对各位的适配很有帮助。
这是最终的效果,各位可以尝试拖动中间的分栏,体验一下适配效果👻。
咒语 3: 重整旗鼓
前面的步骤,算是我们几乎完成了所有前置工作吧,我们创建了一个很不错的画板,一副很不错的空白画,接下来就要开始发挥了!既然要画画,当然少不了一支画笔呀🤠!在Flutter
中,我们用Paint
定义画笔。
style
: 画笔的样式,只有两种fill
,stroke
。填充和描边,比如说我们用笔画了一个正方形,这个正方形是空心还是实心呢?用style,一切都在你的掌握!🏄🏻strokeWidth
: 画笔🖌️粗细。color
:画笔🖌️颜色。
咒语 4: 下笔如有神
有笔有画布,简单画点?直接调用canvas
的函数就可以画出你想要的图形,长方形、圆形、各种基础图形。先来个简单的,给大家整俩长方形🟦。
直接调用
canvas.drawRRect()
方法,即可绘制圆角矩形。参数如上图代码中所示,我们定义了矩形的位置、长宽、圆角,再选择刚才创建的画笔。其他的教给我们的魔法画笔🧙♂️就可以了~。
你觉得矩形太简单?你太小看canvas
了。来看看他有多少绘制方法吧,每一种都等着你去体验。
再给大伙整一个圆形🟡呗?原理和上面类似,选择绘制圆形的方法,定义圆心、半径,选择画笔。圆形就出现了。
除了基本图形,我们也可以通过连通多个点位,画出一个图形🌟。这也需要我们告诉我们画笔我们要画的路径,Flutter中我们用
Path
定义。在下面我们定义了一条路径,是通过两个点位连接的,同时我们不想简单的连接两个点,我们给我们的路径加上了一个radius
参数,让绘制附有曲线感🐳。
看看效果?
总感觉少了点什么?嗯~要张开嘴笑啊😆,简单,在定义一个点,和我们的起点重合,画笔再画回去就行了,但是弧度不能一样,不然重合了~
clockwise
:顺时针绘制还是逆时针绘制。
尾声
今天简单给各位介绍了一些Flutter绘制的基础知识,希望各位能有所收获,后续我也会深入研究一些Flutter的绘制操作,欢迎各位关注我的博客。
- 参考文章
- 项目源码(DartPad)
- 这副笑脸送给大家,希望大家在生活、工作中遇到困难,挫折,都保持乐观,没有一帆风顺的人生。总在跌倒、困境、迷茫中徘徊的你终会露出美好的笑容🎆😛。