Dart 如何使用文本画师绘制文本？

上面说，“要在

画布上绘制文本

，请使用

textpainer

”。因此，在我的

MyCustomPainter

的绘制方法中，我有以下几点：

TextSpan span = new TextSpan(text: 'Yrfc');
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left);
tp.layout();
tp.paint(canvas, new Offset(5.0, 5.0));

---

我尝试过各种偏移量

（Offset.zero，Offset.infinite，new Offset（10.0，10.0）

，但我从来都看不到屏幕上画的文字。

我在键入这个问题时找到了答案，但我已经努力解决了一段时间，所以发布以防对其他人有所帮助

解决方法是将TextSpan行更改为：

TextSpan=newtextspan（样式：newtextstyle（颜色：Colors.grey[600]），文本：“Yrfc”）；

---

显然，它是以不可见的方式绘制文本，或者是以白色（背景）绘制文本，因为我没有明确选择颜色。

在TextPainter构造函数中，还需要指定TextDirection参数，否则会收到异常：

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.blue[800]), text: name);
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas, new Offset(5.0, 5.0));

要在flatter中绘制，请使用小部件。

CustomPaint

小部件将对象作为参数。在该类中，您必须重写

paint

方法，该方法为您提供了一个可以在其上绘制的画布。以下是用于绘制上图中文本的代码

@覆盖
空心油漆（帆布，尺寸）{
最终文本样式=文本样式(
颜色：颜色，黑色，
尺寸：30，
);
最终文本span=文本span(
文字：“你好，世界。”，
风格：textStyle，
);
最终文本画家=文本画家(
text:textSpan，
textDirection:textDirection.ltr，
);
文本布局(
最小宽度：0，
maxWidth:size.width，
);
最终xCenter=（size.width-textpainer.width）/2；
最终的Y中心=（size.height-textpainer.height）/2；
最终偏移=偏移（X中心，Y中心）；
textpainer.paint（画布、胶印）；
}

笔记：

• 如果使用白色背景，请确保将文本颜色设置为除白色以外的其他颜色，这是默认颜色
• Flatter尽量不采用文本方向，因此您需要明确设置它。缩写

  ltr

  表示从左到右，英语等语言使用它。另一个选项是

  rtl

  （从右到左），这有助于减少代码在开发人员没有考虑的语言环境中使用时的bug

上下文 下面是main.dart代码，以便您可以在上下文中看到它

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
正文：HomeWidget（），
),
);
}
}
类HomeWidget扩展了无状态Widget{
@凌驾
小部件构建（构建上下文）{
返回中心(
child:CustomPaint（//默认的文本颜色确实是白色。在复制上面的代码之前，人们需要注意的一点是，每次重新创建TextPainter都相对昂贵（具体来说，调用
layout
是昂贵的）。在可能的情况下，您希望保留textpainer并重用它，仅在该方法的参数更改时调用它。@IanHickson每当我尝试重用textpainer时，我都会得到“textpainer.paint在尚未计算文本几何体时调用”。我每次都可以创建一个新的textpainter，它可以工作，但似乎无法重用textpainter。有没有你知道的例子可以说明这一点？（事实上，我认为每次文本更改时都需要一个新的油漆工，所以不太确定可以重用油漆工的频率）你必须确保调用“布局”设置文本画师的任何属性后，在文本画师上重新计算几何体。谢谢。一切都很好。唯一的改进是找到一种自动居中文本的方法，而不是使用
Offset（50100）
-左/上填充。@kosiara BartoszKosarzycki，在您调用
textpainer.layout
后，您将有权访问
textpainer.width
和
textpainer.width
。我已更新了答案，使文本居中。