Flutter自定义view —— 闯关进度条
原创
1. 概述
因工作需要，需要自定义实现一个布局，当然用横向Row控件也可以实现这个效果，
但我觉得还是用自定义 view 实现效果比较好，想要什么效果都可以去实现，所以我按照
自己的想法写了一下这个自定义布局。
自定义view.gif
2. 实现思路：
看到这个布局，其实挺简单的，无非是画个圆画条直线，唯一一个困难点在于它的排列，说白了就是计算坐标
每个图形放置的位置，需要动态计算出来。
2.1 没有闯关时
没有闯关时，圆线条依次排列。
2.2 闯过一关后
闯过一关后，就分为闯过的关卡，与未闯过的关卡。为何单拎出来呢？因为需要计算当前关卡，并改换其它画笔，并且
因为半径不同，后续的坐标需要重新计算。
2. 效果实现分析
2.1 定义画笔
//未通关圆
Paint unPassCirclePaint = Paint()
..style = PaintingStyle.fill //画笔样式：填充
..color = Color(unPassCardColor) //画笔颜色
..isAntiAlias = true //是否抗锯齿
..strokeWidth = 20.0; //画笔宽度
//通关圆最外层阴影
Paint passFirstCirclePaint = Paint()
..style = PaintingStyle.fill
..color = Color(0x66FFEDEC)
..isAntiAlias = true
..strokeWidth = 20.0;
//通关圆第二层阴影
Paint passSecondCirclePaint = Paint()
..style = PaintingStyle.fill
..color = Color(0xffFFA9A6)
..isAntiAlias = true
..strokeWidth = 20.0;
//通关圆
Paint passCirclePaint = Paint()
..style = PaintingStyle.fill
..color = Color(passCardColor)
..isAntiAlias = true
..strokeWidth = 20.0;
//未通关线条
Paint unPassLinePaint = Paint()
..style = PaintingStyle.fill
..color = Color(unPassCardLineColor)
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = 10.0;
//通关线条
Paint passLinePaint = Paint()
..style = PaintingStyle.fill
..color = Color(passCardLineColor)
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = 10.0;2.2：画-关卡圆
//画圆
/*
* Offset c, 圆心坐标
* double radius, 半径
* Paint paint 画笔
*/
canvas.drawCircle(
Offset(unPassRadius * (2 * i + 1) + i * lineWidth, passRadius),
unPassRadius,
unPassCirclePaint);2.3：画-管卡之间的线条
//画线段
/*
* Offset p1, 起点坐标
* Offset p2, 终点坐标
* Paint paint
*/
canvas.drawLine(
Offset(
(unPassRadius * 2 * (i + 1) + lineWidth * i) - 2, passRadius),
Offset(unPassRadius * 2 * (i + 1) + (i + 1) * lineWidth + 2,
passRadius),
unPassLinePaint);2.3：画文字
//创建一个文本绘制器
var textPainter = new TextPainter();
//设置文本方向
textPainter.textDirection = TextDirection.ltr;
//设置文本样式
textPainter.text = new TextSpan(
text: strText,
style: TextStyle(
color: textColor,
fontSize: 12.0,
//基线，两个值，alphabetic 用来排字母的，ideographic 用来排表意字的（类似中文）
textBaseline: TextBaseline.ideographic,
),
);
//计算用于绘制文本的字形的视觉位置。
textPainter.layout();
//获取文字宽度
double width = textPainter.width;
//获取文字高度
double height = textPainter.height;
//画文字
textPainter.paint(canvas, new Offset(dx - width / 2, dy - height / 2));2.4：打包封装使用
至于画笔画布的使用就不过多的解释了具体看这里：Flutter 自定义 View 介绍
class CustomView extends StatefulWidget {
@override
CustomViewState createState() => new CustomViewState();
}
class CustomViewState extends State<CustomView> {
List<String> cardNameList=['说一说','比一比','学一学','秀一秀','赞一赞','赏一赏'];
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('custom_View'),
),
body:
SingleChildScrollView(
padding: EdgeInsets.only(top: 20,left: 20),
scrollDirection: Axis.horizontal,
//用 CustomPaint 控件包裹 我们的自定义view
child: CustomPaint(
size: Size((147*5+30).toDouble(), (30+10+20).toDouble()),
painter: CustomPassCard(
cartCount:6,
...各个参数
),
),
)
);
}注意点：
- 文字的坐标点，必须获取文字的宽高，然后再去设置文字的坐标点（Android 需要计算基线，flutter不需要）
- 绘制是从下往上绘制，也就是说先绘制的在下面，注意绘制时的遮盖问题。
3. 坐标点的计算
1.绘制每个控件都需要准确的坐标，圆的圆心坐标点，进度线的起始点与终点坐标点，自己在纸上画一画，
找到规律，总结成一个公式，然后套用。
2.还要在最外面设置size大小，size 大小也是动态计算的，计算出整个控件的宽度，高度可以定死
有啥不明白的随时联系我，稍后我会上传github,如果能帮助到你，麻烦点个赞
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录