使用Sliver App Bar时如何修改状态栏颜色？

解决方案 #

你遇到的iOS端SystemChrome.setSystemUIOverlayStyle不生效的核心原因是：iOS系统不支持单独设置状态栏背景色，状态栏默认透明，背景色由其下方紧邻的视图颜色决定，只有状态栏文本/图标亮度可通过配置修改。以下3种方案都可以在不影响Sliver功能的前提下实现需求：

方案1：直接使用SliverAppBar自带的systemOverlayStyle属性（优先推荐）

SliverAppBar本身内置了状态栏样式配置参数，不需要额外嵌套普通AppBar，也不会触发Sliver功能异常：

SliverAppBar(
  // 基础配置保留你原有逻辑即可
  expandedHeight: 200,
  pinned: true,
  floating: false,
  // 新增以下配置
  backgroundColor: kPrimaryColor, // 与你要的状态栏颜色保持一致
  systemOverlayStyle: SystemUiOverlayStyle(
    // Android端配置
    statusBarColor: kPrimaryColor,
    statusBarIconBrightness: Brightness.light, // 浅色背景设为dark，深色背景设为light
    // iOS端配置
    statusBarBrightness: Brightness.dark, // 深色背景对应白色状态栏文本，浅色背景设为light
  ),
  flexibleSpace: FlexibleSpaceBar(
    // 你原有FlexibleSpace的配置
    title: Text('页面标题'),
  ),
)

方案2：SliverAppBar未固定（pinned为false）时，顶部补状态栏占位色块

如果你的SliverAppBar会随页面滚动完全隐藏，可在CustomScrollView的最顶部添加一个状态栏高度的色块，保证无论SliverAppBar是否显示，状态栏下方都有对应颜色的背景：

CustomScrollView(
  slivers: [
    // 优先添加状态栏占位组件
    SliverToBoxAdapter(
      child: Container(
        height: MediaQuery.of(context).padding.top,
        color: kPrimaryColor,
      ),
    ),
    // 原有SliverAppBar及其他Sliver组件
    SliverAppBar(
      // 你原有的所有配置不变
    ),
    // ...其他Sliver组件
  ],
)

方案3：用AnnotatedRegion全局包裹Scaffold

如果需要整个页面的状态栏样式统一，可在Scaffold外层嵌套AnnotatedRegion，跨平台生效：

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      statusBarColor: kPrimaryColor,
      statusBarIconBrightness: Brightness.light,
      statusBarBrightness: Brightness.dark,
    ),
    child: Scaffold(
      body: CustomScrollView(
        slivers: [
          // 你原有的Sliver组件逻辑完全不变
        ],
      ),
    ),
  );
}

参考图示 #

预期实现效果：

使用普通AppBar导致的异常效果：
#

注意事项 #

如果以上方案在iOS端仍不生效，可检查项目ios/Runner/Info.plist文件中UIViewControllerBasedStatusBarAppearance配置是否为true，该配置默认为true，无需额外修改。

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