如何在 Flutter 中检测并突出显示图像的点击部分？

Question

我正在开发一个 Flutter 应用程序，其中有一个图像（例如汽车），并且我想检测用户何时点击图像的特定部分。点击某个部件后，它应该改变颜色以指示选择，类似于此示例：

我目前正在使用 SVG 图像，但如果需要，我愿意接受其他格式。我需要解决方案：

检测图像的哪一部分被点击。 更改点击部分的颜色，同时保持其他部分不受影响。 允许动态调整图像大小，而不会破坏点击检测。 在 Flutter 中实现这一目标的最佳方法是什么？我应该使用自定义路径、热点还是其他什么？任何示例或建议将不胜感激！

Answer 1

您需要从Stack开始。

分层思考。

第一层是将您的图像放在那里。

其次，您可以创建一个 Container（MainArea），其大小与所有图像相同。 使用 Positioned 将此容器设置在图像上。 在此 MainArea 容器内，创建 Columns 和 Rows 并创建另一个 Containers(EachParts) 来填充每个部分的区域。 使用 Flex 或 Expanded 可以帮助您调整 MainArea 的大小并保持或多或少的可扩展性。这里需要更多研究。

在所有这些 EachParts 容器中，您可以设置颜色：Colors.transparent 并用 GestureDetector 包裹它，并在点击发生时获取。

我想这可能是一个好的开始。

祝你好运！