Flutter中Android模拟器全屏模式顶部出现黑条问题求助

DevOps 小满

2026-8-25

解决Android模拟器全屏模式顶部黑条问题

以下是几个可行的解决方案，按优先级尝试：

1. 调整SystemChrome调用顺序并初始化Flutter绑定

当前代码中SystemChrome设置在runApp之后执行，可能导致系统UI配置未及时生效。需先初始化Flutter绑定，再设置系统UI模式，最后启动应用：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized(); // 必须先初始化绑定
  // 隐藏所有系统UI，交互时暂时显示后自动隐藏
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);
  // 强制竖屏（匹配模拟器配置）
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(const MyApp());
  });
}

// 其余代码保持不变

2. 让应用自动填充屏幕空间

移除Root组件中手动设置的height（Container默认会占满父组件空间），同时在MaterialApp中配置适配参数：

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useInheritedMediaQuery: true,
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const Root(),
    );
  }
}

class Root extends StatelessWidget {
  const Root({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      // 移除手动height设置，让容器自动填充可用空间
    );
  }
}