Flutter Android应用如何移除顶部系统状态栏边框

数据老陈

2026-7-13

解决Android状态栏边框问题

针对你遇到的iOS模拟器无状态栏边框、但Android端出现边框的问题，给你几个不同技术栈的解决方法：

原生Android项目（Java/Kotlin）

调整主题配置：在res/values/styles.xml中修改AppTheme，设置状态栏透明并允许布局延伸到状态栏下方：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentStatus">false</item>
</style>

代码层面配置：在Activity的onCreate方法中添加沉浸式状态栏设置：

window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LAYOUT_STABLE or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
window.statusBarColor = Color.TRANSPARENT

Flutter项目

在main函数中通过SystemChrome统一配置状态栏样式：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
    statusBarIconBrightness: Brightness.dark, // 图标亮度根据页面背景调整
  ));
  runApp(const MyApp());
}

这样设置后，状态栏会完全透明，不会出现额外边框。

React Native项目

利用官方StatusBar组件配置：

import { StatusBar, useEffect } from 'react-native';

function App() {
  useEffect(() => {
    StatusBar.setTranslucent(true);
    StatusBar.setBackgroundColor('transparent');
  }, []);

  return (
    // 你的页面内容
  );
}

若页面布局需要适配状态栏高度，可配合SafeAreaView或手动添加paddingTop: StatusBar.currentHeight。

附问题截图：
Android状态栏边框问题