有没有一种简单的方法可以在 Flutter 测试中找到从 RichText 构建的特定文本？

Question

例如，我可能在当前的小部件树中有一个 RichText，看起来像

RichText(
 text: TextSpan(
   text: 'Hello ',
   style: DefaultTextStyle.of(context).style,
   children: <TextSpan>[
     TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
     TextSpan(text: ' world!'),
   ],
 ),
)

我尝试使用 find.text('Hello bold world!') 但它不起作用，因为它不是文本。

Answer 1

最简单的解决方案是在 RichText 上放置一个键并以这种方式读取它。

如果出于某种原因这不合适，您可以使用 find.byWidgetPredicate 并传递一个匹配 RichText 小部件的函数，其 text.toPlainText() returns 您想要的字符串。

Answer 2

我通过手动深入研究小部件解决了这个问题

    final richTextWidget = tester.element(richTextFinder).widget as RichText;
    print(richTextWidget.text.children);

有了 children，我可以断言它们是按预期生成的

Answer 3

这是 find.byWidgetPredicate 调用。

find.byWidgetPredicate((widget) => fromRichTextToPlainText(widget) == 'Hello bold world!')

这是 fromRichTextToPlainText 辅助函数。将 RichText 小部件传递给它，它将 return 纯文本。

String fromRichTextToPlainText(final Widget widget) {
  if (widget is RichText) {
    if (widget.text is TextSpan) {
      final buffer = StringBuffer();
      (widget.text as TextSpan).computeToPlainText(buffer);
      return buffer.toString();
    }
  }
  return null;
}

Answer 4

框架解决方案

我最近 contributed 将此功能添加到 Flutter 框架，即内置查找器中。

`find.text()`

您现在可以启用 findRichText parameter，然后它还会找到独立的 RichText 小部件：

find.text(
  'Hello bold world!',
  findRichText: true,
)

有没有一种简单的方法可以在 Flutter 测试中找到从 RichText 构建的特定文本？

Is there an easy way to find particular text built from RichText in a Flutter test?

flutter

dart

flutter-test

框架解决方案

`find.text()`