Flutter开发：如何检测设备顶部/底部安全区域高度？

你遇到的MediaQuery.of(context).padding.top/bottom返回0的问题，是因为如果你的Widget嵌套在Scaffold内部，Scaffold会自动处理安全区的布局适配，将当前上下文的padding重置为0。要获取真实的屏幕安全区（刘海、底部指示条）尺寸，需要使用**MediaQuery.of(context).viewPadding**，这个属性会返回整个屏幕的原始安全区边距，不受Scaffold等组件的影响。

正确的尺寸计算与布局实现 #

1. 获取关键尺寸参数：

final mediaQuery = MediaQuery.of(context);
// 屏幕总高度
final totalScreenHeight = mediaQuery.size.height;
// 真实安全区边距（刘海高度：viewPadding.top，底部指示条高度：viewPadding.bottom）
final viewPadding = mediaQuery.viewPadding;

2. 实现顶部75%区域+底部控件区的布局，同时让图片在顶部区域居中：

return Scaffold(
  body: Column(
    children: [
      // 顶部图片区域：占总屏幕高度的75%
      SizedBox(
        height: totalScreenHeight * 0.75,
        child: Container(
          // 可选：如果需要让图片避开刘海，添加顶部padding
          padding: EdgeInsets.only(top: viewPadding.top),
          child: const Center(
            child: Image.asset('你的本地图片路径'), // 或Image.network('远程图片地址')
          ),
        ),
      ),
      // 底部控件区域：占剩余屏幕高度
      Expanded(
        child: Container(
          // 可选：如果需要让控件避开底部指示条，添加底部padding
          padding: EdgeInsets.only(bottom: viewPadding.bottom),
          color: Colors.grey[200],
          child: const Center(
            child: Text('底部控件区域'),
          ),
        ),
      ),
    ],
  ),
);

额外说明 #

• 如果不需要让顶部图片避开刘海，直接去掉padding: EdgeInsets.only(top: viewPadding.top)即可，图片会在整个75%高度区域内居中，包括刘海区域。
• 若要计算除去安全区后的可用屏幕高度，可以用totalScreenHeight - viewPadding.top - viewPadding.bottom，再按比例分配区域。

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