Flutter 115: 圖解自定義 View 之 Canvas (四

    小菜在前兩節透過 Canvas 繪製圖形時涉及到部分文字繪製，之前只是簡單的嘗試，有很多未注意到的地方；小菜今天嘗試全面的學習嘗試一下；透過 Canvas 繪製文字時使用的屬性效果與直接使用 TextView 對應基本一致；

Canvas.drawParagraph

1. 新建一個 ParagraphBuilder 段落構造器；
2. 在構造器中新增文字的基本資訊，包括 ParagraphStyle 文字屬性等；
3. 透過 ParagraphConstraints 約束段落容器寬度；
4. 透過 layout 計算段落中每個字形的大小和位置；
5. 透過 Canvas.drawParagraph 進行文字繪製；

// 1-2 段落構造器並新增文字資訊
ParagraphBuilder _pb = ParagraphBuilder(
    ParagraphStyle(fontWeight: FontWeight.normal, fontSize: 17))
  ..pushStyle(ui.TextStyle(color: Colors.blue))
  ..addText(str);
// 3 設定段落容器寬度
ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
// 4 計算文字位置及尺寸
Paragraph paragraph = _pb.build()..layout(pc);
// 5 文字繪製
canvas.drawParagraph(paragraph, Offset(50.0, 50.0));

ParagraphStyle

1. fontSize

    fontSize 為字型繪製時字號，以邏輯畫素為單位；

fontSize: 14.0 + (i + 1)

2. fontWeight

    fontWeight 用於繪製文字的字形的粗細，從 w100 -> w900 逐級變粗；預設是 w400；

fontWeight: FontWeight.values[i + 1],

3. fontStyle

    fontStyle 為字型樣式，是否為 normal 正規或 italic 斜體；

fontStyle: (i % 2 == 0) ? FontStyle.normal : FontStyle.italic,

4. fontFamily

    fontFamily 為文字的字型，使用其他字型時需要倒入字型包資原始檔並在 pubspec.yaml 中進行資原始檔註冊宣告；可以從 字型庫中選擇適當的字型型別；

fontFamily: 'DancingScript',
// pubspec.yaml
flutter:
  fonts:
    - family: DancingScript
      fonts:
        - asset: images/DancingScript-Regular.ttf

    小菜在新增字型時，遇到 A dependency specification must be a string or a mapping. 問題，其原因是字型資源的註冊需要在 flutter: 中新增，而不是在 dependencies: 依賴中新增，dependencies: 都是新增的依賴鍵值對；

5. maxLines & ellipsis

    maxLines 為段落最長繪製行數，一般與 ellipsis 透過使用，ellipsis 為最後繪製不完時展示的文字內容；

maxLines: 4,
ellipsis: '...',

6. textDirection & textAlign

    textDirection & textAlign 的使用是小菜覺得應當注意的地方；textDirection 為文字繪製方向，ltr 即 left-to-right 從左至右；rtl 即 right-to-left 從右至左，類似於 ‘ar/fa/he/ps/ur’ 阿拉伯語和希伯來語等；textAlign 為文字的對齊方式；

    使用 rtl 方式時，標點均會展示在左側，符合從右向左的繪製順序；TextAlign 對齊方式注意區分 left / start 和 right / end 的不同；

• TextAlign.center 文字內容居中
• TextAlign.justify 以 TextDirection 設定為準，自動延展填充至容器寬度
• TextAlign.left 均與容器左側對齊
• TextAlign.start 以 TextDirection 設定為準，開始位置進行對齊
• TextAlign.right 均與容器右側對齊
• TextAlign.end 以 TextDirection 設定為準，結束位置進行對齊

textAlign: _paragraphTextAlign(i),
textDirection: (i % 2 == 0) ? TextDirection.ltr : TextDirection.rtl,

// TextAlign & TextDirection
enum TextAlign { left, right, center, justify, start, end, }
enum TextDirection { ltr, rtl }

7. height

    height 簡單理解為行高，但並非完全與 fontSize 倍數一致；

height: 2,

8. strutStyle

    strutStyle 小菜理解為段落高度屬性，透過設定一系列垂直方向的維度定義更高階的行高屬性；其中 StrutStyle 設定的 fontSize / fontFamily 等都是以此為基準線，藉此改變的是段落行高，而不會改變段落文字屬性(字號/字型等)；

ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
  height: 2, fontSize: 17,
  strutStyle: ui.StrutStyle(fontFamily: 'DancingScript', fontSize: 20, height: 2),
))

ParagraphBuilder

1. pushStyle()

    pushStyle() 將給定的 TextStyle 樣式新增到文字屬性中，包括文字的顏色，背景等一系列樣式；

    TextStyle 中涉及多種文字樣式，對於與 ParagraphStyle 段落屬性相同的 fontSize / fontFamily 等，以 TextStyle 為準；其中對於文字顏色，color 不能與 foreground 一同使用；wordSpacing 為單詞間隔，letterSpacing 為文字字母之間間隔，兩者要有區分；

var _gradient = ui.Gradient.linear(
    Offset(0.0, 0.0),
    Offset(0.0, size.height),
    [Colors.orange, Colors.deepOrange, Colors.green],
    [0 / 3, 1 / 3, 2 / 3]);
var _bgGradient = ui.Gradient.linear(
    Offset(0.0, 0.0),
    Offset(0.0, size.height),
    [Colors.blueGrey, Colors.white, Colors.grey],
    [0 / 3, 1 / 3, 2 / 3]);
var _shadow = [
  Shadow(offset: Offset(2.0, 2.0), blurRadius: 4.0, color: Colors.grey)
];
ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(fontSize: 17))
  ..pushStyle(ui.TextStyle(
      // color: Colors.green,
      foreground: Paint()..shader = _gradient,
      // background: Paint()..shader = _bgGradient,
      fontSize: 20,
      fontWeight: FontWeight.w700,
      wordSpacing: 4,
      letterSpacing: 2,
      shadows: _shadow))
  ..addText(str);
ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
Paragraph paragraph = _pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(50.0, 50 + _spaceHeight));

2. addText()

    addText() 將給定的文字新增到段落中，並以設定好的段落樣式進行繪製；

3. addPlaceholder()

    addPlaceholder() 為文字繪製中設定佔位區域；若在 addText() 之前設定優先展示佔位區域在進行文字繪製，若在之後設定則是文字繪製結束後新增佔位；且有多種垂直佔位對齊方式；

for (int i = 0; i < 3; i++) {
  ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(fontSize: 18))
    ..pushStyle(ui.TextStyle(
        foreground: Paint()..shader = _gradient,
        fontWeight: FontWeight.w700, wordSpacing: 4));
  if (i == 0) {
    _pb = _pb..addPlaceholder(60, 60, i <= 1 ? PlaceholderAlignment.bottom : PlaceholderAlignment.middle);
    _pb = _pb..addText(str);
  } else {
    _pb = _pb..addText(str);
    _pb = _pb..addPlaceholder(60, 60, i <= 1 ? PlaceholderAlignment.bottom : PlaceholderAlignment.middle);
  }
  ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
  Paragraph paragraph = _pb.build()..layout(pc);
  canvas.drawParagraph(paragraph, Offset(50.0, 50 + _spaceHeight));
  canvas.drawRect(
      Rect.fromPoints(Offset(49.0, 50.0 + _spaceHeight),
          Offset(size.width - 49, 50.0 + paragraph.height + _spaceHeight)),
      _paint..shader = _gradient);
  _spaceHeight += paragraph.height;
}

    小菜對於 Canvas.drawParagraph 的嘗試暫時到目前為止，還有很多特有屬性會在實際過程中進行研究嘗試；如有錯誤，請多多指導！

    [Canvas.drawParagraph 案例原始碼] github.com/ACE-YANGCE/FlutterApp/blob/master/lib/page/paragraph_page.dart

來源： 阿策小和尚