Flutter应用关闭MIUI优化后在小米手机顶部显示不全求助

API 探路者

2026-7-10

解决小米设备关闭MIUI优化后Flutter应用顶部显示不全的问题

用SafeArea包裹页面内容
关闭MIUI优化后，系统状态栏的适配逻辑会改变，SafeArea会自动适配设备的状态栏、导航栏等系统UI区域，避免内容被遮挡：
```
Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        AppBar(title: const Text('首页')),
        // 其他页面内容
      ],
    ),
  ),
)
```
调整AppBar的内边距
如果不想用SafeArea，可以手动给AppBar添加顶部内边距，适配状态栏高度：
```
AppBar(
  title: const Text('首页'),
  padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
)
```

修改Android主题配置
打开android/app/src/main/AndroidManifest.xml，确保Activity使用的主题支持状态栏透明：

<activity
    android:name=".MainActivity"
    ...
    android:theme="@style/NormalTheme">
    <!-- 其他配置 -->
</activity>

然后在android/app/src/main/res/values/styles.xml中更新主题：

<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

通过SystemChrome设置状态栏样式
在应用初始化时，强制设置状态栏为透明，让页面内容可以延伸到状态栏区域：

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

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