flutter - Flutter 中类似 Image Map 的功能？

Question

我已经搜索了很多但没有找到可靠的答案，所以如果这是一个骗局，我真的试过了。

我有一个应用程序正在重写并从基于 html 的混合平台(特别是 Trigger.io)移走；在 Flutter 和 Dart 中快速进行重写。

应用程序的一部分包括一个非常简单的屏幕，用户可以在其中点击人体图像，并通过图像映射返回 body 部位的标识符和标题(右前臂、左膝、头部、 ETC)。

我根本无法在 Flutter 中找到与此行为和功能类似的东西。我是否错过了一些简单的事情，因为我完全想多了？

非常感谢。

Answer 1

您可以将Image 包装在GestureDetector 中并指定 onTapDown(或 onTapUp)回调来检查点击的坐标并采取相应的行动。

(要将全局坐标转换为局部坐标，请参阅:flutter : Get Local position of Gesture Detector)

这是一个粗略的尝试:

import 'package:quiver/iterables.dart' show enumerate;

class ImageMap extends StatelessWidget {
  const ImageMap({
    Key key,
    @required this.image,
    @required this.onTap,
    @required this.regions,
  }) : super(key: key);

  final Widget image;
  final List<Path> regions;

  /// Callback that will be invoked with the index of the tapped region.
  final void Function(int) onTap;

  void _onTap(BuildContext context, Offset globalPosition) {
    RenderObject renderBox = context.findRenderObject();
    if (renderBox is RenderBox) {
      final localPosition = renderBox.globalToLocal(globalPosition);
      for (final indexedRegion in enumerate(regions)) {
        if (indexedRegion.value.contains(localPosition)) {
          onTap(indexedRegion.index);
          return;
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) => _onTap(context, details.globalPosition),
      child: image,
    );
  }
}