dart - Flutter - 用于绘图书页面的 TextPainter 与段落

Question

我需要显示长文本，这将占用几个屏幕/页面。我还必须添加一些功能，所以我想实现自己的文本显示组件。

我找到了两个对应这个任务的类:

• TextPainter
  对文本使用 TextSpan
  使用 paint(canvas, offset) 进行绘画

• 段落
  对文本和样式使用“队列”
  使用 Canvas.drawParagraph(paragraph, offset) 进行绘画

它们有什么区别，用哪一个？!

如果文本包含100行，并且一页只能放置10行，那么如何在下一页上绘制截断的文本直到什么都没有？

Answer 1

_{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%)。也可能是测量误差¯\_(ツ)_/¯。