如何借助Stack和Positioned组件实现Flutter真正的响应式布局？

你的核心问题是所有Positioned的定位值都是硬编码的固定数值（比如top:60.0、top:700.0），这些值在不同尺寸的屏幕上比例完全不同，必然导致错位。下面是具体修复方案：

修复思路 #

放弃固定像素值，改用基于屏幕尺寸的相对单位或动态计算值，推荐两种实现方式：

方式1：使用MediaQuery获取屏幕尺寸（无需额外插件） #

通过MediaQuery.of(context)获取当前屏幕的宽高，然后按百分比计算定位值，确保在任何屏幕上的位置比例一致。

修复后的代码示例：

@override
Widget build(BuildContext context) {
  super.build(context);
  // 获取屏幕尺寸
  final screenHeight = MediaQuery.of(context).size.height;
  final screenWidth = MediaQuery.of(context).size.width;
  
  return Stack(
    children: [
      Googlelutter(mapKey: _mapKey, osmController: osmController),
      // 顶部状态按钮
      Positioned(
        // 用屏幕高度的8%代替固定60px
        top: screenHeight * 0.08,
        left: 0.0,
        right: 0.0,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.04), // 相对水平内边距
              child: Consumer<AppData>(
                builder: (ctx, dsc, child) => ElevatedButton(
                  style: ElevatedButton.styleFrom(
                      shape: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.all(Radius.circular(50))),
                      backgroundColor: dsc.driverStatusClr),
                  onPressed: () async {
                    // 原按钮逻辑不变
                    if (isDriverAvailable != true) {
                      isDriverAvailable = true;
                      makeDriverOnlineNow();
                      getLocationLiveUpdates();

                      Provider.of<AppData>(context, listen: false)
                          .buttonOnline(Colors.green.shade300, "Online");

                      await UserSimplePrefences.setButtonStatus(false);
                      displayToastMessage("You are Online now", context);
                    } else {
                      Provider.of<AppData>(context, listen: false)
                          .buttonOnline(Colors.black54, "Offline");
                      driverOffline();
                      IsolateNameServer.removePortNameMapping(_isolateName);
                      BackgroundLocator.unRegisterLocationUpdate();
                      displayToastMessage("You are Offline now", context);
                      isDriverAvailable = false;

                      await UserSimplePrefences.setButtonStatus(true);
                      onStop();
                    }
                  },
                  child: Padding(
                    padding: EdgeInsets.all(screenWidth * 0.04), // 相对内边距
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          dsc.driverStatusTxt,
                          style: TextStyle(
                              fontSize: screenWidth * 0.05, // 相对字体大小
                              fontWeight: FontWeight.bold,
                              color: Colors.white),
                        ),
                        Icon(
                          Icons.phone_android,
                          color: Colors.white,
                          size: screenWidth * 0.065, // 相对图标大小
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      // 底部定位按钮
      Positioned(
        // 距离底部用屏幕高度的10%，而不是固定top:700
        bottom: screenHeight * 0.1,
        right: screenWidth * 0.055,
        child: GestureDetector(
          onTap: () {
            osmController.currentLocation();
          },
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(22.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black,
                    blurRadius: 6.0,
                    spreadRadius: 0.5,
                    offset: const Offset(0.7, 0.7),
                  )
                ]),
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: const Icon(Icons.location_on, color: Colors.black),
              radius: screenWidth * 0.05, // 相对半径
            ),
          ),
        ),
      ),
      // 右上角追踪按钮
      Positioned(
        top: screenHeight * 0.13,
        right: screenWidth * 0.055,
        child: GestureDetector(
          onTap: () async {
            await osmController.enableTracking();
          },
          child: Container(
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(22.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black,
                    blurRadius: 6.0,
                    spreadRadius: 0.5,
                    offset: const Offset(0.7, 0.7),
                  )
                ]),
            child: CircleAvatar(
              backgroundColor: Colors.white,
              child: const Icon(Icons.track_changes, color: Colors.black),
              radius: screenWidth * 0.05,
            ),
          ),
        ),
      ),
    ],
  );
}

方式2：正确使用Sizer插件 #

如果你想用Sizer，要确保在MaterialApp外层包裹Sizer组件，然后用h（屏幕高度百分比）和w（屏幕宽度百分比）单位替换固定数值：

// 示例：定位值替换
top: 8.h, // 相当于屏幕高度的8%
right: 5.5.w,
padding: EdgeInsets.all(4.w),
fontSize: 5.w,

关键注意点 #

• 所有与位置、尺寸相关的固定数值都要替换成相对值，包括内边距、字体大小、图标大小
• 底部元素优先用bottom属性而不是top，避免在长屏幕上被挤出视野
• 如果需要更精准的布局，可以结合LayoutBuilder获取父组件的可用尺寸，而不是全局屏幕尺寸

内容的提问来源于stack exchange，提问作者Pannam T