我正在开发一个Flutter应用，我想改变iOS底部区域的颜色（Home指示区/底部安全区域背后的区域）。

在Android上，我能够改变系统导航栏颜色SystemUiOverlayStyle，效果按预期工作。不过，我不确定在iOS上如何实现同样的效果。

我的目标是让底部的安全区域与应用的背景颜色保持一致，而不是显示默认颜色。

有没有Flutter专门的方法来实现，还是需要进行iOS原生配置？

任何示例或最佳实践都将不胜感激。

谢谢！

解决方案

将你的页面包裹在 AnnotatedRegion<SystemUiOverlayStyle> 中，并让Scaffold的背景颜色保持一致。

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.black, // iOS safe area color
      ),
      child: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Container(),
        ),
      ),
    );
  }
}

如果仍然显示为白色：

return Scaffold(
  backgroundColor: Colors.black,
  body: Container(
    color: Colors.black,
    width: double.infinity,
    height: double.infinity,
  ),
);

对于整个应用：

MaterialApp(
  theme: ThemeData(
    scaffoldBackgroundColor: Colors.black,
  ),
);

重要： 在iOS上，底部的Home指示区域通常会跟随延伸到屏幕边缘的Widget的背景颜色。请避免在 SafeArea 下方留出白色区域。