Flutter 自定义绘制 View
在 Flutter 中自定义 View 有两种方式:
- 组合已有控件
- 自定义绘制
如何自定义绘制
有两个类做这件事情:
CustomPaint
:会在绘制阶段提供一个Canvas
画布CustomPainter
: 具体的画笔, 可配置画笔的颜色,路径等
CustomPaint(
painter: Sky(),
child: Center(
child: Text(
'Once upon a time...',
style: const TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w900,
color: Color(0xFFFFFFFF),
),
),
),
)
复制代码
当在绘制阶段时, CustomPaint
首先会调用 painter
在画布上进行绘制, 然后再绘制它的 child
控件, child
绘制完成之后会调用 foregroundPainter
进行绘制. 画布的坐标系和 CustomPaint
的坐标系匹配. CustomPaint
有个 Size
属性标识将绘制多大的区域, 绘制时这个 Size
属性将会传递到 CustomPainter
的 paint
方法中, 具体的绘制就在paint
方法中进行, void paint(Canvas canvas, Size size);
的方法签名中的两个参数:
- canvas: 用于绘制的画布, 注意: 该画布是应用所有控件都在使用的, 所以通过这个画布其实是可以绘制充满屏幕的内容的
- size: 表示应该绘制的区域大小, 每次绘制都应该限制在这个区域内, 否则可能会覆盖了其他控件的绘制结果
实例一
绘制一个矩形和圆角:
Widget build(BuildContext context) {
return CustomPaint(
painter: ColorPainter(),
size: Size(300, 200),
);
}
复制代码
class ColorPainter extends CustomPainter {
final red = Color.fromRGBO(255, 0, 0, 1);
final blue = Color.fromRGBO(0, 0, 255, 1);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
final rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);
// 注意这一句
canvas.clipRect(rect);
paint.color = blue;
canvas.drawRect(rect, paint);
paint.color = red;
canvas.drawCircle(Offset.zero, size.height, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
复制代码
- 定义了绘制区域大小, 为
CustomPaint
中的size
属性
final rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height);
复制代码
- 绘制矩形区域
canvas.drawRect(rect, paint);
复制代码
- 绘制圆形
- 圆心偏移量为: 0, 也就是
CustomPaint
的原点 - 半径为区域的高度
- 圆心偏移量为: 0, 也就是
canvas.drawCircle(Offset.zero, size.height, paint);
复制代码
最需要注意的地方我觉得是 canvas.clipRect(rect);
这句. 这句表示只绘制给定的区域中的内容. 如果不写这句, 效果就是这样:
为什么会这样呢 ?
其实这就是 Size
这个参数的重要性, 因为 Canvas
是被所有控件公有的, 如果我们绘制时不指定区域大小, 那在进行一些形状的绘制时就会出现超出区域的问题.
实例二: 绘制一个带波纹的 CardView
- 支持颜色配置
- 支持组合外部控件 源码: wave_card.dart
Flutter 自定义绘制 View的更多相关文章
- Flutter自定义绘制(1)- 绘制基础
CustomPainter Flutter 中实现绘制的主要是CustomPainter类. 我们一般继承这个类,来使用它: class MyPainter extends CustomPainter ...
- 自定义绘制View
Paint(画笔) Canvas(画布) The Canvas class holds the "draw" calls. To draw s ...
- 【转】Android绘制View的过程研究——计算View的大小
Android绘制View的过程研究——计算View的大小 转自:http://liujianqiao398.blog.163.com/blog/static/18182725720121023218 ...
- Android 自定义View修炼-Android实现圆形、圆角和椭圆自定义图片View(使用BitmapShader图形渲染方法)
一.概述 Android实现圆角矩形,圆形或者椭圆等图形,一般主要是个自定义View加上使用Xfermode实现的.实现圆角图片的方法其实不少,常见的就是利用Xfermode,Shader.本文直接继 ...
- Android XML中引用自定义内部类view的四个why
今天碰到了在XML中应用以内部类形式定义的自定义view,结果遇到了一些坑.虽然通过看了一些前辈写的文章解决了这个问题,但是我看到的几篇都没有完整说清楚why,于是决定做这个总结. 使用自定义内部类v ...
- android绘制view的过程
1 android绘制view的过程简单描述 简单描述可以解释为:计算大小(measure),布局坐标计算(layout),绘制到屏幕(draw): 下面看看每一步的动作到底是 ...
- 自定义View_2_关于自定义组合View
自定义View(2) Android当中给我们提供了丰富的UI控件,当然也许满足不了我们的需求,我们就必须学会自定义自己的View,我们怎么算是自定义自己的view呢! 我们会根据原来有的View对V ...
- ASP.NET MVC学习笔记-----使用自定义的View Engine
我们都知道在ASP.NET MVC中自带了Razor View Engine,Razor十分的强大,可以满足我们绝大部分的需要.但是ASP.NET MVC的高度可扩展性,使我们可以使用自定义的View ...
- Unity 扩展属性自定义绘制
这么晚了准备睡觉的时候,去学习了一会. 发现一个标题好奇的点进去. 居然是自定义绘制属性. 在前几天这个问题把我难住了,没想到几分钟就能解决的问题. 我花了半天时间使用反射去解决... 如果我们想 ...
随机推荐
- Git——起步(待续)
原文链接:Getting Started with Git
- pyecharts绘画优美图形
常用图形:柱形图-折线图-饼图-散点图 from pyecharts import Line, Bar, Pie, EffectScatter # 数据 attr =["衬衫", ...
- Mysql读写分离(Mycat版)
(1).读写分离概述 1)工作原理 读写分离是让主数据库处理事务性增删改操作(insert.delete.update),让从数据库处理查询查询操作(select). 2)作用 1.分担负载 2.主从 ...
- 123457123457#0#-----com.yuming.ZuiNiuChengYu--前拼后广--最牛成语
com.yuming.ZuiNiuChengYu--前拼后广--最牛成语
- JavaScript正则表达式补充
定义正则表达式 /.../用于定义正则表达式 /.../g表示全局匹配 /.../i表示不区分大小写 /.../m表示多行匹配 JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m ...
- Python基础之内置函数(二)
先上一张图,python中内置函数: python官方解释在这:点我点我 继续聊内置函数: callable(object):检查对象是否可被调用,或是否可执行,结果为bool值 def f1(): ...
- PAT 甲级 1062 Talent and Virtue (25 分)(简单,结构体排序)
1062 Talent and Virtue (25 分) About 900 years ago, a Chinese philosopher Sima Guang wrote a histor ...
- Core Data 多表关联
1.概念简介 coreData中存在复杂的数据关系时,一张表难以满足需求,此时就需要了解使用coreData多表的关联使用. 如 课程表 和 章节表 的关系:一个课程跟章节的对应关系是 一对多,单一个 ...
- Asp.net C# 遍历Excel中的表格名称
Asp.net C# 遍历Excel中的表格名称 string strConn = "Provider=Microsoft.Jet.OLEDB.4.0;" + " ...
- javascript正则总结
目录 1. 正则基础知识 2. 正则实例 3. 正则常见问题 4. 开发常用validate 5. 网上整理的正则 1. 正则基础知识 精确匹配: /test/ 匹配一类字符:匹配a,b,c任一字符/ ...