Я довольно долго искал и не нашел четкого ответа, поэтому, если это обман, я честно пытался.
У меня есть приложение, которое я переписываю и отхожу от гибридной платформы на основе html (в частности, Trigger.io); делаю переписывание во Flutter и Dart, по быстрому.
Часть приложения включает в себя довольно простой экран, на котором пользователь может щелкнуть изображение человеческого тела и через карту изображений получить обратно идентификатор и подпись для части тела (правое предплечье, левое колено, голова и т. д.).
Я просто не могу найти аналога такому поведению и возможностям во Flutter. Я пропустил что-то простое, потому что полностью обдумал это?
Спасибо большое.
Вы можете обернуть Image
в GestureDetector
и указать onTapDown
(или onTapUp
) обратные вызовы, которые проверяют коснувшиеся координаты и действуют соответствующим образом.
(Чтобы преобразовать глобальные координаты в локальные координаты, см.: флаттер: получить локальное положение детектора жестов)
Вот грубая попытка:
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,
);
}
}
Вы можете использовать Rect.contains
, если вы можете разложить интересующие вас области на прямоугольники. Если у вас есть более сложные формы, вы можете построить Path
с помощью различных Path.add...
методов и использовать Path.contains
.
@ChrisH Я обновил свой ответ более конкретным примером.
@jamesdlin что такое перечислять?
Да, я расследовал это. По-прежнему требуется какой-то способ сопоставить эти координаты с какой-то частью изображения, и это недостающий ключ, который карта изображения изначально хорошо обрабатывает в HTML. Я подумал о том, чтобы наложить изображение на другое изображение той же формы, затем раскрасить каждую часть уникальным цветом, затем уменьшить его непрозрачность до 0 и прочитать нажатия на ЭТО изображение, проверить значение цвета, найти часть . Это то, что я собираюсь проверить дальше. Я делаю это слишком сложно? Я под прицелом, возможно, у меня аналитический паралич.