Flutter Android开发：如何移除状态栏残留间隙与底部黑色缩放区域？

1. 调整系统UI设置，消除状态栏间隙 #

将原有的系统UI模式设置改为沉浸式全屏模式，彻底隐藏所有系统UI元素，避免残留间隙：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: []);

• immersiveSticky模式支持滑动屏幕边缘临时调出系统UI，松手后自动隐藏，适配绘图应用的全屏操作需求；
• overlays: []表示完全隐藏状态栏和底部导航栏，若需保留底部导航栏，可改为overlays: [SystemUiOverlay.bottom]，但需配合后续布局调整。

2. 移除屏幕内边距，让绘图区域占满全屏 #

即使隐藏了系统UI，MediaQuery仍会保留状态栏/导航栏的内边距，需通过MediaQuery.removePadding清除这些内边距，确保CustomPaint完全覆盖屏幕。

3. 优化页面生命周期配置 #

将StatelessWidget改为StatefulWidget，把系统UI和屏幕方向的设置移到initState中，避免build方法重复执行时多次调用系统API：

修改后的完整代码：

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

class CardDisplayScreen extends StatefulWidget {
  static const routeName = '/carddisplayscreen';
  const CardDisplayScreen({super.key});

  @override
  State<CardDisplayScreen> createState() => _CardDisplayScreenState();
}

class _CardDisplayScreenState extends State<CardDisplayScreen> {
  @override
  void initState() {
    super.initState();
    // 固定横屏方向
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.landscapeLeft,
      DeviceOrientation.landscapeRight,
    ]);
    // 设置沉浸式全屏
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: []);
  }

  @override
  void dispose() {
    // 退出页面时恢复系统默认设置（可选，根据需求调整）
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
    SystemChrome.setPreferredOrientations([]);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.white,
      resizeToAvoidBottomInset: false, // 禁用底部内边距适配，避免布局偏移
      child: MediaQuery.removePadding(
        context: context,
        removeTop: true,
        removeBottom: true,
        child: CustomPaint(
          size: MediaQuery.of(context).size,
          painter: Design2(),
        ),
      ),
    );
  }
}

4. 配置AndroidManifest.xml，解决底部黑色区域 #

在android/app/src/main/AndroidManifest.xml的<activity>标签中添加以下属性，确保原生层全屏显示：

<activity
    ...
    android:windowFullscreen="true"
    android:windowLayoutInDisplayCutoutMode="shortEdges"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar">

• android:windowFullscreen="true"：让应用在原生系统层实现全屏；
• android:windowLayoutInDisplayCutoutMode="shortEdges"：允许应用延伸覆盖刘海屏/挖孔屏区域；
• android:theme="@style/Theme.AppCompat.Light.NoActionBar"：移除原生ActionBar，避免与Flutter布局冲突。

额外排查点 #

如果底部黑色区域仍存在，检查Android系统的「显示缩放」设置，确保缩放比例为系统默认值（自定义缩放比例可能导致应用显示异常）。

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