Flutter CustomPainter基础——成为Flutter梵高的第一步

写在前面

  绘制,无论对前端还是客户端,都是一个老生常谈的话题。作为一个开发,我们很多时候并不能完全的依赖美工切图,给图。我们需要自己的工具和方法——绘制(Paint)🖼。不知道有没有很多同学和我一样,刚开始接触绘制相关的代码部分时会有一些抵触或者说是恐惧,总觉得这一块非常的复杂、难写。不要急,今天我来带各位入门Flutter中的魔法🧙‍♂️——CustomPainter

准备阶段

  • 今天的代码我不再使用编辑器编写,因为不涉及业务逻辑的处理🤓,我用DartPad给各位演示。当然各位也可以使用编辑器来展现自己的代码,但是我还是很推荐大家使用Flutter官方提供的这个DartPad的,它充分展示了Flutter强大的适配能力,而且方便、简洁👍🏻。
  • 学习Flutter中的绘制,对Android出生的同学来说是比较友好的,😀因为实现方式基本上与Android是一模一样。但是各位!不要担心,我会站在萌新的角度给大家介绍,毕竟是一个基础教程。

魔法开始

咒语 1:打开+新建

  好家伙,开局就是一波小高潮,直接打开DartPad,左上角新建一个Flutter Pad,创建一个简单的Container嵌套,赋值Container的颜色属性✅。 step 1

咒语 2:魔法初现👀

  我们的定制魔法来了,我们给它起一个个性化的名字,各位随意,我就叫VanGoghPaint,梵高的画。这幅画,就要继承我们今天的主角了——CustomPainterstep 2 大家可以看到,继承了CustomPainter之后,我们实现了父类的两个方法——paintshouldRepaint

  • paint: 顾名思义,就是我们创作的地方,我们在paint函数中尽情的创作,挥洒我们的笔墨🎉。
  • shouldRepaint:控制绘制的重绘,主要用于动画、刷新等功能,作为一节基础课,这里我们直接返回false,不进行重绘了。

咒语的滑铁卢

  此时,一大波兄弟眼疾手快,直接新建child加入VanGoghPaint()!再接一个Run!🚫民工三连,发现结果,是这样的... step 3   蛤?图呢?怎么就剩一小块了?额...,兄弟们,事情是这样的~CustomPainter的祖先节点会默认的限制绘制区域的大小,如果你不设置的话,默认就是...0💡。所以嘛!给个大小就阔以了。其实这里,各位简单设置绘制上层Container的大小就行了,一个简单的数值,就可以恢复显示效果。但是,DartPad的显示区域的大小随着 代码 UI的分栏线拖动,比例可以一直变化,所以这里我做了一个优化,获取父控件大小!🔧引入一个小控件——LayoutBuilder,大家有兴趣可以去研究一下这个控件,对各位的适配很有帮助。
  这是最终的效果,各位可以尝试拖动中间的分栏,体验一下适配效果👻。 step 4

咒语 3: 重整旗鼓

  前面的步骤,算是我们几乎完成了所有前置工作吧,我们创建了一个很不错的画板,一副很不错的空白画,接下来就要开始发挥了!既然要画画,当然少不了一支画笔呀🤠!在Flutter中,我们用Paint定义画笔。 step 5

  • style: 画笔的样式,只有两种fill, stroke。填充和描边,比如说我们用笔画了一个正方形,这个正方形是空心还是实心呢?用style,一切都在你的掌握!🏄🏻
  • strokeWidth: 画笔🖌️粗细。
  • color:画笔🖌️颜色。

咒语 4: 下笔如有神

  有笔有画布,简单画点?直接调用canvas的函数就可以画出你想要的图形,长方形、圆形、各种基础图形。先来个简单的,给大家整俩长方形🟦。 step 6   直接调用canvas.drawRRect()方法,即可绘制圆角矩形。参数如上图代码中所示,我们定义了矩形的位置、长宽、圆角,再选择刚才创建的画笔。其他的教给我们的魔法画笔🧙‍♂️就可以了~。
  你觉得矩形太简单?你太小看canvas了。来看看他有多少绘制方法吧,每一种都等着你去体验。   再给大伙整一个圆形🟡呗?原理和上面类似,选择绘制圆形的方法,定义圆心、半径,选择画笔。圆形就出现了。   除了基本图形,我们也可以通过连通多个点位,画出一个图形🌟。这也需要我们告诉我们画笔我们要画的路径,Flutter中我们用Path定义。在下面我们定义了一条路径,是通过两个点位连接的,同时我们不想简单的连接两个点,我们给我们的路径加上了一个radius参数,让绘制附有曲线感🐳。   看看效果?   总感觉少了点什么?嗯~要张开嘴笑啊😆,简单,在定义一个点,和我们的起点重合,画笔再画回去就行了,但是弧度不能一样,不然重合了~

  • clockwise:顺时针绘制还是逆时针绘制。

尾声

  今天简单给各位介绍了一些Flutter绘制的基础知识,希望各位能有所收获,后续我也会深入研究一些Flutter的绘制操作,欢迎各位关注我的博客。

  • 参考文章
  • 项目源码(DartPad)
  • 这副笑脸送给大家,希望大家在生活、工作中遇到困难,挫折,都保持乐观,没有一帆风顺的人生。总在跌倒、困境、迷茫中徘徊的你终会露出美好的笑容🎆😛。
分类:
前端
标签: