Flutter-响应式图像映射?

时间:2020-04-03 18:18:09

标签: flutter imagemap flutter-image

晚上好

我已经搜索了许多小时,找不到解决方案。 我已设置了全屏图像,并使用堆栈放置了多个GestureDetector。 我已经成功能够按下GestureDetector并调用一个函数。 问题在于,当屏幕尺寸更改为新手机或旧手机时,图像会响应并覆盖全屏,但是Positioned()当然会停留在同一位置,因此图像映射不再正确。 / p>

有没有一种方法可以使“定位”响应迅速?或也许以完全不同的方式实现期望的结果?

请帮助我:)

text-transform

1 个答案:

答案 0 :(得分:0)

将我的评论发布为答案,以防万一它起作用,并且没有提供更好的答案。请投赞成票并标记为回答。 :-)

您可以尝试使用MediaQuery.of来确定设备的大小(高度和宽度),然后使用这些值将“定位的”小部件的位置参数从“基准”大小增加或减小。从理论上讲,应该(可以)匹配背景图像的缩放比例。可能还需要缩放“位置”小部件的大小。

有关您的评论的更新:

不是。我的意思是,您需要在对UI布局满意的设备上运行MediaQuery.of,并记录该设备的宽度和高度。然后,您可以在应用程序中使用此宽度和高度,并将这些“基准”值与在其他设备上运行该应用程序时获得的值进行比较。

所以: 将“其他设备宽度”除以“基线设备宽度”即可得到宽度缩放比例。 将其他设备的高度除以基线的设备高度,即可得到您的高度缩放系数。

然后使用这些缩放因子来“缩放”定位的小部件的宽度(positioned-widget-width乘以width-scaleing-factor)和高度(positioned-widget-height乘以height-scaling-factor)和位置。屏幕(您将不得不使用定位值)。

听起来有些混乱,但这只是简单的数学运算。

就像我说的那样,可能不起作用,或者可能不是最优雅的解决方案。那里有太多不同的设备,您将永远无法真正对其进行完全测试。可能需要重新考虑您的UI。也许其他人对此有想法。

相关问题