使用 Flutter 自定義一個 ProgressBar - IntervalProgressBar

一個支援間隔，多色，圓角，水平，豎直的進度條

特點

• 支援水平和豎直方向
• 支援進度條間隔顏色
• 支援多色設定
• 支援起始圓角

使用方式

Center(
   child: Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [10, 29, 18, 27, 16, 15, 24, 3, 20, 10].map<Widget>((i) {
         return Padding(
             padding: EdgeInsets.only(right: 10),
             child: IntervalProgressBar(
                 direction: IntervalProgressDirection.vertical,
                 max: 30,
                 progress: i,
                 intervalSize: 2,
                 size: Size(12, 200),
                 highlightColor: Colors.red,
                 defaultColor: Colors.grey,
                 intervalColor: Colors.transparent,
                 intervalHighlightColor: Colors.transparent,
                 reverse: true,
                 radius: 0));
       }).toList())
)
複製程式碼

屬性

屬性	型別	說明
direction	enum	進度條的方向，水平或豎直
max	int	進度塊的個數
progress	int	高亮進度塊的個數
intervalSize	int	進度塊之間間隔的大小。當水平時，代表寬度；當豎直時，代表高度
size	Size	控制元件的尺寸
highlightColor	Color	高亮進度塊的顏色
defaultColor	Color	進度塊的預設顏色
intervalColor	Color	間隔塊的預設顏色
intervalHighlightColor	Color	高亮進度塊之間的間隔塊的顏色
reverse	bool	是否逆序填充
radius	int	起始塊的圓角

實現

抽象基類

• 負責計算一些水平和豎直進度條的公有屬性
• 呼叫子類的 paintBlock 執行具體的 draw 操作

abstract class IntervalProgressPainter extends CustomPainter {
  final int max;
  final int progress;
  final int intervalSize;
  final Color highlightColor;
  final Color defaultColor;
  final Color intervalColor;
  final Color intervalHighlightColor;
  final double radius;
  final bool reverse;

  final Paint _paint = Paint()
    ..style = PaintingStyle.fill
    ..isAntiAlias = true;

  Rect bound;

  IntervalProgressPainter(
      this.max,
      this.progress,
      this.intervalSize,
      this.highlightColor,
      this.defaultColor,
      this.intervalColor,
      this.intervalHighlightColor,
      this.radius,
      this.reverse);

  @override
  @mustCallSuper
  void paint(Canvas canvas, Size size) {
    if (progress > max) {
      throw Exception("progress must <= max");
    }
    bound = Offset.zero & size;
    Size blockSize = calBlockSize();
    for (int i = 0; i < max; i++) {
      /// 呼叫子類執行繪製
      paintBlock(canvas, i, blockSize);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    final old = oldDelegate as IntervalProgressPainter;
    return old.max != max ||
        old.progress != progress ||
        old.intervalSize != intervalSize ||
        old.intervalColor != intervalColor ||
        old.defaultColor != defaultColor ||
        old.highlightColor != highlightColor ||
        old.intervalHighlightColor != intervalHighlightColor ||
        old.radius != radius;
  }

  bool highlightBlock(int index) =>
      reverse ? index >= (max - progress) : index < progress;

  bool highlightInterval(int index) =>
      reverse ? index >= (max - progress - 1) : index < progress - 1;

  void paintBlock(Canvas canvas, int blockIndex, Size blockSize);

  Size calBlockSize();

  bool shouldDrawStartRadius(int index) => index == 0 && radius > 0;

  bool shouldDrawEndRadius(int index) => index == max - 1 && radius > 0;

  bool shouldDrawInterval(int index) =>
      index != max - 1 &&
      (intervalColor != IntervalProgressBar.TRANSPARENT ||
          intervalHighlightColor != IntervalProgressBar.TRANSPARENT);
}
複製程式碼

水平進度條

• 計算每個進度塊的尺寸

  @override
  Size calBlockSize() =>
      Size(((bound.width - intervalSize * (max - 1)) / max), bound.height);
複製程式碼

• 繪製每個塊

  @override
  void paintBlock(Canvas canvas, int i, Size blockSize) {
    /// blockSize: calBlockSize 的返回值 
    /// i: 塊的索引

    final blockWidth = blockSize.width;
    final highlight = highlightBlock(i);
    final dx = (blockWidth + intervalSize) * i;

    Rect rect = Rect.fromLTRB(0, 0, blockWidth, bound.height);
    _paint.color = highlight ? highlightColor : defaultColor;
    canvas.save();
    /// 畫布移動 dx: 進度塊寬度+間隔塊寬度
    canvas.translate(dx, 0);
    /// 繪製起始圓角
    if (shouldDrawStartRadius(i)) {
      rect = _drawLeftRound(canvas, rect);
    }
    
    /// 繪製末尾圓角
    if (shouldDrawEndRadius(i)) {
      rect = _drawRightRound(canvas, rect);
    }
    /// 繪製塊
    canvas.drawRect(rect, _paint);

    /// 繪製間隔塊
    if (shouldDrawInterval(i)) {
      _paint.color =
          highlightInterval(i) ? intervalHighlightColor : intervalColor;
      canvas.drawRect(
          Rect.fromLTRB(
            blockWidth,
            0,
            blockWidth + intervalSize,
            bound.height,
          ),
          _paint);
    }
    canvas.restore();
  }
複製程式碼

• 繪製一邊帶圓角，另一半不帶圓角的矩形

  void _drawRadius(Canvas canvas, Rect rect, Rect clipRect) {
    final roundRect = RRect.fromLTRBR(
        rect.left, rect.top, rect.right, rect.bottom, Radius.circular(radius));
    final path = Path()..addRRect(roundRect);
    canvas.save();
    canvas.clipRect(clipRect, clipOp: ClipOp.difference);
    canvas.drawPath(path, _paint);
    canvas.restore();
  }
}
複製程式碼

豎直進度條類似，具體請看原始碼

github.com/stefanJi/In…