Flutter自定义view|Flutter自定义view —— 闯关进度条 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 { List 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, ...各个参数 ), ), ) ); }

注意点：