flutter TextPainter 的用法

news2024/11/27 5:27:23

本文章基于 Flutter 3.16.2 Dart SDK 3.2.2。

TextPainter 是 Flutter 中用于在 Canvas 上绘制文本的类。它允许您在自定义的 CustomPainter 中使用 drawText 方法来绘制文本，并可以控制文本的位置、颜色、字体等属性。

import 'package:flutter/material.dart';

class CustomTextPainter extends CustomPainter {
  @override
  void 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));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}

class CustomTextWidget extends StatelessWidget {
  @override
  Widget 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 {
  @override
  void 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);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return oldDelegate != this;
  }
}