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 扩展属性自定义绘制
这么晚了准备睡觉的时候,去学习了一会. 发现一个标题好奇的点进去. 居然是自定义绘制属性. 在前几天这个问题把我难住了,没想到几分钟就能解决的问题. 我花了半天时间使用反射去解决... 如果我们想 ...
随机推荐
- question——缓存清理、更新
突然理解了各大电信公司客服说的最多的一句话“您提交的申请将会在**小时之后生效,建议您到时登陆查看”. 分析之后,我认为这里面大多的原因在于: 1.定时任务: 2.缓存有效期. 可见这么庞大的公司,目 ...
- thymeleaf动态拼接class
场景:站内消息,一些已读的要区别与未读的. <table class="layui-table"> <thead> <tr> <th la ...
- hadoop:/bin/bash: /bin/java: No such file or directory
Stack trace: ExitCodeException exitCode=127 In HADOOP_HOME/libexec/hadoop-config.sh look for the if ...
- ES6 中 let 和 const 总结
目录 let const 1. let要好好用 1. 基本用法 2. let声明的变量不存在变量提升 3. TDZ(temporal dead zone)暂时性死区 4. 不允许重复声明 2. 块级作 ...
- mybatis 一对多,多对一配置
一. 简介: 本实例使用顾客和订单的例子做说明: 一个顾客可以有多个订单, 一个订单只对应一个顾客 二. 例子: 1. 代码结构图: 2. 建表语句: CREATE DATABASE test; US ...
- 2017年度好视频,吴恩达、李飞飞、Hinton、OpenAI、NIPS、CVPR、CS231n全都在
我们经常被问:机器翻译迭代了好几轮,专业翻译的饭碗都端不稳了,字幕组到底还能做什么? 对于这个问题,我们自己感受最深,却又来不及解释,就已经边感受边做地冲出去了很远,摸爬滚打了一整年. 其实,现在看来 ...
- ab webbench 网站测压解决
ab 网站测压解决 ab –c 100 –n 100 http://192.168.1.117/forum.php (测试方式) 同时发100人发100个请求 ab –c 100 –n 1000 ht ...
- bzoj3624(Apio2008):免费道路
题目↓ Sample Input 5 7 2 1 3 0 4 5 1 3 2 0 5 3 1 4 3 0 1 2 1 4 2 1 Sample Output 3 2 0 4 3 0 5 3 1 1 2 ...
- ORA-12514错误分析
ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 的解决方法 ORA-12514 TNS 监听程序当前无法识别连接描述符中请求服务 有同事遇到这个问题,现总结一下,原因如下: ...
- golang以服务方式运行
golang开发的二进制程序,一般需要长期后台运行的,在linux上可以用supervisor或upstart或systemd等第三方守护进程来实现.其实golang自己也可以实现以服务的形式常驻后台 ...