我需要显示长文本,这将占用几个屏幕/页面。我还必须添加一些功能,所以我想实现自己的文本显示组件。
我找到了两个对应这个任务的类:
TextPainter
对文本使用 TextSpan
使用 paint(canvas, offset) 进行绘画段落
对文本和样式使用“队列”
使用 Canvas.drawParagraph(paragraph, offset) 进行绘画
它们有什么区别,用哪一个?!
如果文本包含100行,并且一页只能放置10行,那么如何在下一页上绘制截断的文本直到什么都没有?
最佳答案
tl;dr: imo TextPainter
> Paragraph
(因为 API 更好)。
我创建了 simple example app比较两者TextPainter
和 Paragraph
Canvas
上呈现文本的方法(CustomPainter
)。两种方法都很好,都使用了不同的方法,都有奇怪的摆动。
TextPainter
首先我想提一下 TextPainter
界面似乎更容易 - 至少对我而言。您只需将 text
指定为 TextSpan
条目或树 - 奇怪的是,它不是默认值 - textDirection
。您还可以提供诸如 maxLines
、style
和 textAlign
等选项(以及其他一些选项)。然后,您需要使用 layout
来指定渲染的布局方式(嗯,仅限 maxWidth
)。最后,在指定的 Offset
上的特定 Canvas
上 paint
。
final TextPainter textPainter = TextPainter(
text: TextSpan(text: text, style: style),
textAlign: TextAlign.justify,
textDirection: TextDirection.ltr
)
..layout(maxWidth: size.width - 12.0 - 12.0);
textPainter.paint(canvas, const Offset(12.0, 36.0));
使用的 TextSpan
在 Flutter 中非常普遍 - RichText
和其他小部件也在使用这个类。我还必须注意,使用 TextPainter
可以让您检查 height
和 width
的像素(在渲染之前) .
段落
第二:段落
。这似乎是更基础的程序方法。正如您在下面看到的,Paragraph
方法不太干净。首先你必须使用 ParagraphBuilder
(因为 Paragraph
没有构造函数)。你需要用 ParagraphStyle
喂它包含各种文本样式,如字体信息、textAlign
、maxLines
等。然后您可以使用 pushStyle
、pop
和 addText
来准备段落的下一部分和下一部分。在 build
之后,您将获得 Paragraph
,您可以在 Canvas
上 drawParagraph
。
final ui.ParagraphBuilder paragraphBuilder = ui.ParagraphBuilder(
ui.ParagraphStyle(
fontSize: style.fontSize,
fontFamily: style.fontFamily,
fontStyle: style.fontStyle,
fontWeight: style.fontWeight,
textAlign: TextAlign.justify,
)
)
..pushStyle(style.getTextStyle())
..addText(text);
final ui.Paragraph paragraph = paragraphBuilder.build()
..layout(ui.ParagraphConstraints(width: size.width - 12.0 - 12.0));
canvas.drawParagraph(paragraph, const Offset(12.0, 36.0));
请注意,TextStyle
有两种类型(Dart UI 和 Flutter)。与 pushStyle
一致,您可以看到 Flutter Painting library TextStyle
变成了Dart UI TextStyle
.另一个奇怪的事情是,您可以/需要在 ParagraphBuilder
中指定一些字体设置 - 即使您将在后面的行中使用 pushStyle
。并且 layout
必须用 width
指定。
我认为我可以更好地用于读取文件等情况,尤其是格式化,因为不需要将文件解析为 TextSpan
树,这可能会很昂贵。如果您知道自己在做什么,我想它也可以比其他方法快一点,但我没有时间深入挖掘它。
最大线数问题
当文本过多时,您可能想要剪辑文本。 Paragraph
和 TextPainter
都暴露了 maxLines
- 设置最大行数 - 和 didExceedMaxLines
- 检测是否超过限制-, 以这种或那种方式。还有 canvas.clipRect
和相关方法允许将所有绘图剪切到选定的空间中。
性能
还有简单的performance test (发布时),这表明这两种方法具有可比性(在我的测试案例中,TextPainter
比 Paragraph
快不超过 2%)。也可能是测量误差¯\_(ツ)_/¯。
关于dart - Flutter - 用于绘图书页面的 TextPainter 与段落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51640388/