Flutter/Dart中如何解决页面内容侵入StatusBar的问题？

问题1：移除AppBar后内容侵入状态栏的解决方法 #

当页面没有AppBar时，Scaffold不会自动为状态栏预留空间，直接用SafeArea包裹页面核心内容即可解决：

Widget build(BuildContext context) {
  return MaterialApp(
    title: _title,
    home: Scaffold(
      // 注释掉AppBar的情况下
      body: const SafeArea(
        child: MainWidget(),
      ),
    ),
  );
}

SafeArea会自动识别系统状态栏、导航栏等预留区域，让子组件从这些区域下方开始布局，同时可以去掉原代码中多余的外层Container，简化结构。

问题2：用SafeArea包裹Container后无效果的原因 #

你给Container设置了height: MediaQuery.of(context).size.height，这个值是屏幕的总高度（包含状态栏、导航栏等系统占用区域）。虽然SafeArea会给顶部添加状态栏高度的padding，但Container的高度依然是满屏高度，导致内容被向下偏移后，Container本身会超出SafeArea的可用空间，视觉上看起来没生效。

两种解决方式：

1. 移除固定高度，让Container自适应SafeArea的空间：

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Container(
      // 删掉height: MediaQuery.of(context).size.height
      ...
    ),
  );
}

2. 计算可用高度，用屏幕总高度减去状态栏高度作为Container的高度：

@override
Widget build(BuildContext context) {
  final statusBarHeight = MediaQuery.of(context).padding.top;
  final availableHeight = MediaQuery.of(context).size.height - statusBarHeight;
  
  return SafeArea(
    child: Container(
      height: availableHeight,
      ...
    ),
  );
}

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