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,
              ...各个参数
            ),
          ),
        )
    );
  }

注意点：

1. 文字的坐标点，必须获取文字的宽高，然后再去设置文字的坐标点（Android 需要计算基线，flutter不需要）

2. 绘制是从下往上绘制，也就是说先绘制的在下面，注意绘制时的遮盖问题。

3. 坐标点的计算

1.绘制每个控件都需要准确的坐标，圆的圆心坐标点，进度线的起始点与终点坐标点，自己在纸上画一画，
找到规律，总结成一个公式，然后套用。

2.还要在最外面设置size大小，size 大小也是动态计算的，计算出整个控件的宽度，高度可以定死

---

有啥不明白的随时联系我，稍后我会上传github,如果能帮助到你，麻烦点个赞