【原】flutter TextPainter 的用法

程序員讀書空間 2023-12-08 發(fā)布于浙江

展開全文

本文章基于 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

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

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!', // 文本內(nèi)容      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;  }}