Flutter组件遮挡手机顶部状态栏问题咨询

这种遮挡不是模拟器导致的，主要是因为没做好页面和系统状态栏的布局适配，下面是几种实用的解决方式：

• 使用SafeArea组件包裹页面内容
  这是Flutter官方推荐的方案，它会自动识别设备的状态栏、底部导航栏等系统预留区域，让页面内容避开这些区域。示例代码：

  Scaffold(
    body: SafeArea(
      child: YourPageContent(), // 替换成你的实际页面内容
    ),
  )
  

• 手动添加顶部内边距
  如果不想用SafeArea，可以通过MediaQuery获取状态栏高度，给页面内容设置顶部padding：

  Scaffold(
    body: Padding(
      padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
      child: YourPageContent(),
    ),
  )
  

• 全局统一配置（可选）
  要是想让整个APP的页面都自动适配状态栏，可以在全局入口做配置，比如结合SystemChrome设置状态栏样式+全局包裹SafeArea：

  void main() {
    WidgetsFlutterBinding.ensureInitialized();
    // 配置状态栏样式（可选）
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
    ));
    runApp(const MyApp());
  }
  
  // 在MaterialApp的builder里全局套SafeArea
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        builder: (context, child) {
          return SafeArea(child: child!);
        },
        home: const YourHomePage(),
      );
    }
  }
  

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