本文章基于 Flutter 3.16.2 Dart SDK 3.2.2。

TextPainter 是 Flutter 中用于在 Canvas 上繪制文本的類。它允許您在自定義的 CustomPainter 中使用 drawText 方法來繪制文本，并可以控制文本的位置、顏色、字體等屬性。

import 'package:flutter/material.dart';class CustomTextPainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {TextPainter textPainter = TextPainter(text: TextSpan(text: 'Hello, Flutter!',style: TextStyle(color: Colors.black, fontSize: 24),),textAlign: TextAlign.center,textDirection: TextDirection.ltr,)..layout();textPainter.paint(canvas, Offset(0, 0));}@overridebool shouldRepaint(CustomPainter oldDelegate) {return oldDelegate != this;}
}class CustomTextWidget extends StatelessWidget {@overrideWidget build(BuildContext context) {return CustomPaint(size: Size(200, 100),painter: CustomTextPainter(),);}
}void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: Text('Custom Text Painter Example'),),body: Center(child: CustomTextWidget(),),),));
}

運行效果如下：就是繪制出一條普通的文本

本文案例使用 DartPad 在線測試 https://dartpad.cn/?id

現在，繪制一條文本，并在文本下繪制一條下劃線（當然你可以是其他任意的圖形），核心代碼如下

import 'package:flutter/material.dart';class UnderlinePainter extends CustomPainter {@overridevoid paint(Canvas canvas, Size size) {Paint paint = Paint()..color = Colors.black..strokeCap = StrokeCap.round..strokeWidth = 4; // 設置下劃線寬度// 繪制文本TextSpan textSpan = TextSpan(text: 'Hello, Flutter!', // 文本內容style: TextStyle(color: Colors.black),);TextPainter textPainter = TextPainter(text: textSpan,textAlign: TextAlign.center,textDirection: TextDirection.ltr)..layout();textPainter.paint(canvas, Offset(0, 0));// 繪制下劃線canvas.drawLine(new Offset(0, textPainter.height),new Offset(size.width, textPainter.height), paint);}@overridebool shouldRepaint(CustomPainter oldDelegate) {return oldDelegate != this;}
}

TextSpan是一個用于表示文本的類，TextSpan包含以下屬性：

• text: 要繪制的文本內容。

• style: 文本的樣式，包括字體、顏色、大小等。

• alignment: 文本的對齊方式。

• textDirection: 文本的方向，例如從左到右或從右到左。

TextPainter類用于在Canvas上繪制文本，常用屬性包括：

• text：要繪制的文本內容。

• style：文本的樣式，包括字體、顏色、大小等。

• alignment：文本的對齊方式。

• textDirection：文本的方向，例如從左到右或從右到左。

• color：文本的顏色。

• fontSize：文本的字體大小。

• fontFamily：文本的字體類型。

• textAlign：文本的對齊方式，例如居中、左對齊、右對齊等。

• maxLines：文本的最大行數，超過這個行數將會出現溢出情況。

• overflow：文本的溢出方式，例如裁剪、滾動等。

• textScaleFactor：文本的縮放因子，可以用于實現縮放效果。

• decorationColor：文本裝飾的顏色，例如線條的顏色。

• decoration：文本裝飾的類型，例如刪除線、上劃線、下劃線等。