Flutter中如何用Positioned结合MediaQuery在Stack中实现组件居中

前置校验：使用前请确保Stack组件撑满全屏（给Stack设置fit: StackFit.expand即可），否则MediaQuery获取的全屏宽高和Stack实际布局尺寸不匹配，会出现定位偏移。

核心计算逻辑 #

你猜测的宽高对半计算思路完全可行，不需要手动反复调整边距靠肉眼对齐，核心逻辑就是让待居中组件的几何中心和Stack的布局中心重合：

• 提前定义待居中组件的固定宽高，记为widgetW、widgetH
• 水平居中偏移量：left = (screenWidth - widgetW) / 2，无需额外设置right属性
• 垂直居中偏移量：top = (screenHeight - widgetH) / 2，无需额外设置bottom属性

避坑提示：不要同时给Positioned设置left+right、top+bottom属性强行拉伸组件凑居中，这种方式在组件有固定宽高时容易出现布局约束冲突。

代码示例 #

// 提前通过MediaQuery获取的屏幕尺寸参数
final double screenWidth = MediaQuery.of(context).size.width;
final double screenHeight = MediaQuery.of(context).size.height;

// 待居中组件的固定宽高，示例为200*100的卡片
const double widgetW = 200;
const double widgetH = 100;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      fit: StackFit.expand, // 强制Stack撑满可用空间
      children: [
        Positioned(
          left: (screenWidth - widgetW) / 2,
          top: (screenHeight - widgetH) / 2,
          child: Container(
            width: widgetW,
            height: widgetH,
            color: Colors.blueAccent,
            alignment: Alignment.center,
            child: const Text('居中组件', style: TextStyle(color: Colors.white)),
          ),
        )
      ],
    ),
  );
}

存在安全区/AppBar时的适配 #

如果页面包含顶部AppBar、系统状态栏、底部安全区，需要先从screenHeight中扣除对应占用高度，再代入计算逻辑：

// 计算实际可用布局高度
final double usableHeight = screenHeight 
  - kToolbarHeight // 扣除默认AppBar高度，自定义AppBar替换为实际高度即可
  - MediaQuery.of(context).padding.top // 扣除顶部状态栏安全区
  - MediaQuery.of(context).padding.bottom; // 扣除底部手势条安全区

// 垂直居中偏移量替换为使用usableHeight计算即可
// top: (usableHeight - widgetH) / 2

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