Flutter Web 应用程序中的文本可以搜索吗？

Question

问题： 当我在浏览器中将 Flutter 应用程序作为 Web 应用程序运行时，我可以使用浏览器的文本搜索功能 Ctrl + F 来搜索页面上的文本。搜索功能会找到当前显示在屏幕上的搜索词的所有实例，但不会找到当前不在视图中的文本的所有其他实例。

示例： 在下面的示例中，我搜索单词 tile，该词总共使用了 8 次：在蓝色图块中使用了 4 次，在紫色图块中使用了 4 次。但是，当我搜索单词 tile 时，浏览器仅找到搜索时屏幕上当前显示的该单词的 4 个实例。它会忽略搜索时未在屏幕上呈现的单词的所有实例。

文档： Flutter 和 Dart 文档没有关于 可搜索文本 的任何信息，并且我没有看到任何其他可用的类似小部件或属性。

尝试：我尝试使用 SelectableText 小部件，但同样的问题仍然存在。

Answer 1

您可以使用

element = document.getElementById('searchable_text')

和

element.textContent || a.innerText

。请参阅 W3Schools 上的 JavaScript 教程。

资源：

告诉我们什么对您有用！

Answer 2

Flutter Web 尚不支持此功能（在此处跟踪 https://github.com/flutter/flutter/issues/65504）。一种解决方法是为列表视图提供应用内搜索栏。

Answer 3

由于 flutter 到目前为止在 web、android 和 ios 中都在画布上绘制了所有内容，因此它不支持它。这意味着您在任何 flutter 应用程序上看到的任何内容，文本，图像等，它都只是在画布上进行的绘图。

Answer 4

如果您在搜索之前将页面滚动到底部，您应该能够找到您期望的所有记录。

我相信这些内容在进入视口缓冲区之前并不在 DOM 中。这意味着，在您在屏幕上看到它们之前，它们几乎不存在于浏览器中。至于无限列表，Flutter 在您滚动时会生成页面的其余 DOM 对象。

滚动后，我可以搜索并找到我正在阅读的所有单词，我看到它们突出显示。当点击 Return 或向上和向下箭头时，浏览器无法将其居中。