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

【问题标题】：Can text in a Flutter web app be made searchable?Flutter Web 应用程序中的文本可以被搜索吗？
【发布时间】：2020-10-08 09:41:05
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

您可以使用element = document.getElementById('searchable_text') 和element.textContent || a.innerText。请参阅W3Schools 上的 JavaScript 教程。

资源：

告诉我们什么对你有用！

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

由于 Flutter 在 web、android 和 ios 上的画布上绘制所有内容，因此它不支持它。意味着您在任何 Flutter 应用程序上看到的任何内容、文本、图像等，它只是在画布上绘制的。

【讨论】：

【解决方案4】：

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

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

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

【讨论】：