Flutter 114: 圖解自定義 ACEProgressPainter 對比進度圖

    小菜今天繪製一個簡單的 收入-支出 進度對比圖；大致效果是在兩個梯形中進行簡單的內容展示；爲了提高可複用性，小菜預先設定如下規則；

• 左右兩側按比例展示對應尺寸，並注意大比例異常情況
• 左右兩側內容顏色支持自定義
• 左右兩側文字顏色內容支持自定義
• 左右兩側支持填充和邊框兩種樣式

ACEProgressPainter

    小菜確定了設定的規則，接下來就是實操了，主要是通過 Canvas 進行繪製，再分爲繪製圖形和繪製文字兩部分；

Canvas.drawPath 繪製梯形(三角形)

1. 根據比例繪製梯形

    小菜預設一個左側提醒比例，其中比例是以屏幕寬度整體計算，位於梯形中位線上，其中梯形角度預設爲 45度 角，這樣根據梯形高度即可計算梯形位置；而右側梯形類似，注意與左側梯形間隔的 spaceWidth 寬度即可；

// 左側
canvas.drawPath(
    Path()..moveTo(_spaceWidth * 0.5 + _strokeWidth, _strokeWidth * 0.5)
      ..lineTo(_spaceWidth * 0.5 + _strokeWidth, _height - _strokeWidth * 0.5)
      ..lineTo(size.width * leftProgress + _height * 0.5 - _spaceWidth * sqrt(2) - _strokeWidth * sqrt(2), _height - _strokeWidth * 0.5)
      ..lineTo(size.width * leftProgress + _height * 0.5 - _spaceWidth * sqrt(2) - _strokeWidth * sqrt(2) - _height + _strokeWidth, _strokeWidth * 0.5)
      ..lineTo(_spaceWidth * 0.5 + _strokeWidth, _strokeWidth * 0.5)
      ..close(),
    _paint..color = leftColor ?? _kProLeftColor);
// 右側
canvas.drawPath(
    Path()..moveTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, Offset.zero.dy)
      ..lineTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, _height)
      ..lineTo(size.width * leftProgress + _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, _height)
      ..lineTo(size.width * leftProgress - _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, Offset.zero.dy)
      ..lineTo(size.width - _kProPaddingWidth - _strokeWidth * 0.5, Offset.zero.dy)
      ..close(),
    _paint..color = rightColor ?? _kProRightColor);

2. 異常比例

    對於比例過小或過大的情況，小菜計劃展示一個固定的三角形，並且在此狀況下不進行文字繪製；

// 左側
if ((size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth) <= _height) {
  _leftPath.lineTo(
      _height + _kProPaddingWidth + _strokeWidth * 0.5, _height);
} else if ((size.width * leftProgress + _height * 0.5) >= size.width - _height) {
  _leftPath.lineTo(
      size.width - _spaceWidth - _strokeWidth * 2 - _kProPaddingWidth, _height);
  _leftPath.lineTo(
      size.width - _spaceWidth - _strokeWidth * 2 - _height - _kProPaddingWidth, Offset.zero.dy);
} else {
  _leftPath.lineTo(
      size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth, _height);
  _leftPath.lineTo(
      size.width * leftProgress - _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth, Offset.zero.dy);
}
// 右側
if ((size.width * leftProgress + _height * 0.5 - _spaceWidth * 0.5 - _strokeWidth) <= _height) {
  _rightPath.lineTo(
      _height + _spaceWidth + _strokeWidth * 2 + _kProPaddingWidth, _height);
  _rightPath.lineTo(
      _spaceWidth + _strokeWidth * 2 + _kProPaddingWidth, Offset.zero.dy);
} else if ((size.width * leftProgress + _height * 0.5) >= size.width - _height) {
  _rightPath.lineTo(
      size.width - _height - _strokeWidth * 0.5 - _kProPaddingWidth, Offset.zero.dy);
} else {
  _rightPath.lineTo(
      size.width * leftProgress + _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, _height);
  _rightPath.lineTo(
      size.width * leftProgress - _height * 0.5 + _spaceWidth * 0.5 + _strokeWidth, Offset.zero.dy);
}

3. 是否填充

    對於梯形內容是否填充，可以通過 Paint().style = PaintingStyle.fill / stroke 來處理，但是需要注意的是，當 Path 設置了 strokeWidth 時，其填充狀態是邊框以內的範圍，即邊框設置越粗，填充範圍越小，其繪製的整體圖形也會越大，因此在計算時需要以邊框中間位置計算；小菜爲了避免填充範圍不夠，設置在 PaintingStyle.fill 時降低邊框粗細爲 0.5；

_paint = _paint
  ..strokeWidth = (isFill == null || isFill == false) ? _strokeWidth : 0.5
  ..style = (isFill == null || isFill == false) ? PaintingStyle.stroke : PaintingStyle.fill;

Canvas.drawParagraph 繪製文字

    之前小菜有簡單介紹過 drawParagraph 文字繪製，其關鍵是對文字屬性及定位進行處理；

1. 左側文字

    文字範圍需要在梯形內，不能超過梯形長度，因此通過計算設置 ParagraphConstraints(width: _leftTextWidth) 文字寬度範圍；通過 ParagraphStyle 設置文字屬性，包括顏色，大小是否換行等；而最後通過 canvas.drawParagraph 設置文字起始位置(可以獲取段落高度)；

if (_leftTextWidth > 0.0) {
  Color _leftColor;
  if (leftTextColor != null) {
    _leftColor = leftTextColor;
  } else if (isFill != null && this.isFill == true) {
    _leftColor = Colors.white;
  } else if (leftColor != null) {
    _leftColor = leftColor;
  } else {
    _leftColor = _kProLeftColor;
  }
  ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
      textAlign: TextAlign.left, fontWeight: FontWeight.w500,
      fontStyle: FontStyle.normal, maxLines: 1,
      ellipsis: '...', fontSize: 16))
    ..pushStyle(ui.TextStyle(color: _leftColor))
    ..addText(leftText);
  ParagraphConstraints pc = ParagraphConstraints(width: _leftTextWidth);
  Paragraph paragraph = _pb.build()..layout(pc);
  
  canvas.drawParagraph(paragraph, Offset(_kProPaddingWidth * 2 + _strokeWidth, _height * 0.5 - paragraph.height * 0.5));
}

2. 右側文字

    右側文字相對於左側略微複雜，首先通過 ParagraphStyle.textAlign 設置文字居右，再計算右側文字寬度時注意右側文字繪製的起始位置，注意邊框寬度及兩個梯形 spaceWidth 間距；最重要的是右側要有空餘，小菜通過 addPlaceholder 添加佔位符；

    注意：在起始位置與屏幕右側距離差小於設置的寬度時，佔位符起作用但整體範圍在屏幕外，因此注意起始位置與文字段落寬度計算正確；

if (_rightTextWidth > 0.0) {
  Color _rightColor;
  if (rightTextColor != null) {
    _rightColor = rightTextColor;
  } else if (isFill != null && this.isFill == true) {
    _rightColor = Colors.white;
  } else if (rightColor != null) {
    _rightColor = rightColor;
  } else {
    _rightColor = _kProRightColor;
  }
  ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
      textAlign: TextAlign.right, fontWeight: FontWeight.w500,
      fontStyle: FontStyle.normal, maxLines: 1,
      ellipsis: '...', fontSize: 16))
    ..pushStyle(ui.TextStyle(color: _rightColor))
    ..addText(rightText)
    ..addPlaceholder(_kProPaddingWidth * 2 + _strokeWidth, Offset.zero.dy, PlaceholderAlignment.middle);
  ParagraphConstraints pc = ParagraphConstraints(width: _rightTextWidth);
  Paragraph paragraph = _pb.build()..layout(pc);

  canvas.drawParagraph(paragraph, Offset(_rightStartWidth, _height * 0.5 - paragraph.height * 0.5));
}

---

    ACEProgressPainter 案例源碼

---

    小菜對於進度對比圖主要通過 Canvas 進行繪製，未單獨封裝 Widget，其中 drawParagraph 還有很多隱藏熟悉小菜未曾嘗試；如有錯誤，請多多指導！

來源： 阿策小和尚