0

晚上好，

我已经搜索了好几个小时，但找不到解决方案。我已经设置了一个全屏图像，并使用堆栈定位了几个 GestureDetector。我已经成功地能够按下 GestureDetector 并调用一个函数。问题是，当屏幕尺寸发生变化时，无论是新手机还是旧手机，图像都会响应并覆盖全屏，但 Positioned() 当然会停留在同一位置，因此图像映射不再正确。

有没有办法让定位响应？或者也许是一种完全不同的方式来达到预期的结果？

请帮我 ：）

class Overview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double sh = MediaQuery.of(context).size.height;
    double sw = MediaQuery.of(context).size.width;
    return Scaffold(
      drawer: AppDrawer(),
      body: Stack(
        children: <Widget>[
          Container(
            height: sh,
            width: sw,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/images/ang7.png'),
                    fit: BoxFit.cover)),
          ),
          Positioned(
            left: 10,
            top: 50,
            child: IconButton(
              icon: Icon(Icons.menu),
              iconSize: 30,
              color: Colors.white,
              onPressed: () => Scaffold.of(context).openDrawer(),
            ),
        Positioned(
        left: left,
        top: top,
        child: GestureDetector(
          // child: Icon(Icons.add_circle),
          onTap: () => Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return Amenities(
                tText[page][0],
                tText[page][1],
                tText[page][2],
              );
            },
          )),
          child: Container(
            height: 35,
            width: 50,
            color: Colors.blue,
          ),
        ));
          ),
4

1 回答 1

0

发布我的评论作为答案，以防万一它有效并且没有提供更好的答案。如果是，请投票并标记为已回答。:-)

您可以尝试使用 MediaQuery.of 来确定设备的大小（高度和宽度），然后使用这些值将 Positioned 小部件的位置参数从您的“基线”大小向上或向下缩放。理论上应该（可能）匹配背景图像的缩放方式。可能还需要缩放定位小部件的大小。

关于您的评论的更新：

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

所以：将 other-device-width 除以 baseline-device-width 以获得您的宽度缩放因子。将 other-device-height 除以 baseline-device-height 以获得您的高度比例因子。

然后使用这些缩放因子来“缩放”定位小部件的宽度（定位小部件宽度乘以宽度缩放因子）和高度（定位小部件高度乘以高度缩放因子）和屏幕上的位置（您将不得不使用定位值）。

听起来很乱，但这只是一些简单的数学运算。

就像我说的那样，可能不起作用或可能不是最优雅的解决方案。有这么多不同的设备，你永远无法真正完全测试这一点。可能需要重新考虑你的 UI。也许其他一些人对此有想法。

于 2020-04-03T18:28:13.393 回答