Flutter-文本画家vs段落绘图书页

Question

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

我找到了与此任务对应的两个类：

>

段落
为文本使用队列，为它们使用样式
使用Canvas.draw段落（段落，偏移量）进行绘画

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

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

Answer 1

_{tl； dr： imoTextPainter}

我创建了一个简单的示例应用程序来比较textpainer和段落在Canvas（属于CustomPainter）上呈现文本的方法。这两种方法都非常好，都使用不同的方法，都有其奇怪的抖动。

首先我想说的是，textpainer界面似乎更简单——至少对我来说是这样。您只需将text指定为TextSpan条目或树，而且-奇怪的是，它不是默认值-textDirection。您还可以提供选项，例如maxLines、style和textAlign（以及其他一些选项）。然后您需要使用layout来指定渲染的布局方式（仅限maxWidth）。最后，在特定的画布上以指定的偏移量绘制。

        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));

UsedTextSpan在flatter中非常普遍-RichText和其他小部件也使用这个类。我还必须注意，使用textpainer可以检查文本的高度和宽度（在渲染之前）。

第二：<代码>段落。这似乎是更基本的程序方法。正如您在下面看到的，段落方法不太干净。首先，您必须使用段落构建器（因为段落没有构造函数）。您需要用包含各种文本样式（如字体信息、文本对齐、maxLines等）的段落样式来填充它。然后，您可以使用pushStyle、pop和addText来准备段落的下一部分和下一部分。在构建之后，您可以在Canvas上获得段落。

        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用户界面和颤振）。与pushStyle一致，您可以看到颤振绘画库TextStyle已转换为Dart UITextStyle。另一件奇怪的事情是，您可以/需要仅在ParagraphBuilder中指定一些字体设置，即使您将在后面的行中使用pushStyle。而布局必须指定宽度。

我认为我可以更好地用于读取文件，尤其是格式化，因为不需要将文件解析为TextSpantree，这可能会很昂贵。如果你知道自己在做什么，我想它也比其他方法快一点，但我没有时间深入挖掘。

当文本太多时，您可能想要剪辑文本。两个段落和TextPainter公开maxLines-设置最大行-和didExceedMaxLines-检测是否超过限制-，以这样或那样的方式。还有canvas.clipRect和相关方法，允许将所有绘图剪辑到选定的空间。

还有一个简单的性能测试（发布时），它表明这两种方法是可比较的（在我的测试案例中，textpainer比段落快不超过2%）。也可能是测量误差’\_(ツ)_/¯.