Как вставить кликабельные точки на изображении во флаттере? - PullRequest
1 голос
/ 10 января 2020

Я хочу сделать это на флаттере, кто-нибудь может мне помочь?

Кликабельные отмеченные точки на изображении

Здравствуйте, мне нужно показать изображение с активируемыми точками на экране и запускает действие, когда пользователь нажимает на эти точки. Я слышал, что это сделано с SVG, я искал в нескольких местах, но я не нашел решения в флаттере.

1 Ответ

0 голосов
/ 10 января 2020

Я боролся с подобной ситуацией.

Решение Слаха - поместите рабочий слой поверх фонового изображения - работает, если вам не нужно масштабировать изображение, но в моем случае позиционированные виджеты становятся недействительными при увеличении image.

Мое решение - встраивать изображение в веб-просмотр, вы можете использовать webview_flutter, потому что его легко подключить к дереву виджетов, но я думаю, что в вашем случае flutter_webview_plugin тоже работает, так как вам просто нужно послушать некоторые нажмите события. Добавьте гиперссылки на элементы, по которым нужно щелкнуть, затем поиграйте с событием click через webviewcontroller (webview_flutter) или onUrlChanged Stream (flutter_webview_plugin).

Одно преимущество, которое вы можете получить сразу же, это возможность использовать .svg без каких-либо других пакетов. на Uri.dataFromString('<html><svg>some svg codes</svg></html>', mimeType: 'text/html').toString()

Тогда вы полностью контролируете внешний вид (через css) и поведение (через javascript). Например, вы можете определить нерегулярные области, которые будут кликабельными и реагирующими на клики.

...