Flutter边缘到边缘应用内容无法显示在半透明系统栏后如何修复？

你遇到的问题核心在于两个关键失误：全局给body添加了顶部内边距，导致内容被强制推离状态栏区域；同时直接在main中设置的系统UI样式可能被MaterialApp的主题配置覆盖。以下是具体修复方案：

修复步骤 #

1. 移除全局顶部内边距 #

你当前代码中通过MediaQuery.of(context).padding.top给整个body加了顶部padding，这会把所有内容往下推，完全避开状态栏区域，自然看不到内容延伸到状态栏后方。只需移除这个顶部内边距，或仅在需要保护的内容上使用SafeArea。

2. 用AnnotatedRegion确保UI样式生效 #

直接在main中设置SystemChrome.setSystemUIOverlayStyle有时会被MaterialApp的主题覆盖，用AnnotatedRegion<SystemUiOverlayStyle>包裹Scaffold可以确保样式直接作用于当前页面。

3. 按需使用SafeArea保护关键内容 #

如果某些核心内容（如标题、按钮）不能被状态栏/导航栏遮挡，仅在这些组件外层套SafeArea，而非给整个body加padding。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  // 开启边缘到边缘模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const EdgeToEdgeApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Edge to Edge Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const EdgeToEdgeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        systemNavigationBarColor: Colors.transparent,
        systemNavigationBarDividerColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
      child: Scaffold(
        // 去掉Scaffold默认背景色，让内容背景透到状态栏下方
        backgroundColor: Colors.transparent,
        body: ColoredBox(
          color: Colors.amber,
          child: ListView(
            children: [
              // 仅给标题区域加SafeArea，避免被状态栏遮挡
              SafeArea(
                child: const Center(
                  child: Column(
                    children: <Widget>[
                      Text('Edge to Edge!', style: TextStyle(fontSize: 24)),
                      SizedBox(height: 20),
                      Text(
                        'Content goes here. Scroll to see how insets are handled.',
                      ),
                    ],
                  ),
                ),
              ),
              // 下方内容直接延伸到状态栏/导航栏下方
              Container(height: 500, color: Colors.blue.withOpacity(0.3)),
              Container(height: 300, color: Colors.green.withOpacity(0.3)),
              Container(height: 200, color: Colors.red.withOpacity(0.3)),
            ],
          ),
        ),
      ),
    );
  }
}

额外检查项 #

• 打开android/app/src/main/AndroidManifest.xml，检查App主题是否存在覆盖设置：

  <!-- 在主题中添加以下配置，确保原生层支持透明状态栏 -->
  <item name="android:statusBarColor">@android:color/transparent</item>
  <item name="android:navigationBarColor">@android:color/transparent</item>
  <item name="android:windowTranslucentStatus">true</item>
  

• 确认你的Flutter版本为稳定版，3.29.0属于稳定版，若仍有适配问题可升级至最新稳定版。

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