如何获取Flutter中安全区域的尺寸？

问题原因 #

你通过MediaQuery.of(context).padding.top手动获取安全区域并设置内边距无效，通常是以下原因导致：

• 组件的context未包含正确的MediaQuery数据（比如组件在MaterialApp/CupertinoApp根组件之前）
• 手动设置的padding被父组件的布局属性覆盖
• 未处理安全区域动态变化场景（如横竖屏切换）

可行解决方案 #

方案1：使用Flutter内置的SafeArea组件（推荐） #

SafeArea是Flutter官方提供的组件，会自动适配不同设备的安全区域，无需手动计算：

class SafeAreaExample extends StatelessWidget {
  const SafeAreaExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      // 仅适配顶部安全区域，可根据需求调整其他边
      top: true,
      child: Container(
        child: const Text('已适配顶部安全区域的内容'),
      ),
    );
  }
}

方案2：正确使用MediaQuery手动设置padding #

如果必须手动计算，确保context来自MaterialApp/CupertinoApp的子组件，再将padding正确应用：

class SafeAreaExample extends StatelessWidget {
  const SafeAreaExample({super.key});

  @override
  Widget build(BuildContext context) {
    // 确保context是根App组件的子节点，才能拿到有效MediaQuery数据
    final topSafePadding = MediaQuery.of(context).padding.top;

    return Padding(
      padding: EdgeInsets.only(top: topSafePadding),
      child: const Text('手动适配顶部安全区域'),
    );
  }
}

关键注意点 #

• 必须确保组件位于MaterialApp或CupertinoApp内部，因为MediaQuery的布局数据由这些根组件提供
• 若页面处于全屏模式（隐藏状态栏），MediaQuery.of(context).padding.top会返回0，此时无需设置内边距
• 可使用MediaQuery.of(context).viewPadding获取包含系统栏的固定padding值（区别于padding：系统栏隐藏时padding会变化，viewPadding保持原始尺寸）

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