如何实现无模糊效果的完全透明CupertinoNavigationBar？

我之前也碰到过这个困扰——Flutter的CupertinoNavigationBar在设置backgroundColor: Colors.transparent时，确实会默认添加一层模糊效果，没法直接实现完全透明让背景图延伸到导航栏下方。这里分享几个亲测有效的方案：

方案一：自定义完全透明的导航栏 #

直接放弃系统自带的CupertinoNavigationBar，自己实现一个导航栏组件，这样能完全控制样式，彻底摆脱模糊效果：

CupertinoPageScaffold(
  // 不使用系统navigationBar，改用Stack布局嵌套内容与自定义导航栏
  child: Stack(
    children: [
      // 铺满屏幕的大标题图片
      Positioned.fill(
        child: Image.asset(
          'assets/your_header_image.png',
          fit: BoxFit.cover,
        ),
      ),
      // 自定义导航栏，适配顶部状态栏高度
      Positioned(
        top: MediaQuery.of(context).padding.top,
        left: 0,
        right: 0,
        child: Container(
          color: Colors.transparent, // 完全透明背景
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          child: Row(
            children: [
              // 模拟Cupertino风格的返回按钮
              CupertinoButton(
                padding: EdgeInsets.zero,
                child: const Icon(CupertinoIcons.back),
                onPressed: () => Navigator.pop(context),
              ),
              const Spacer(),
              // 导航栏标题
              const Text('页面标题'),
              const Spacer(),
              // 右侧占位，保证标题居中对齐
              const SizedBox(width: 44),
            ],
          ),
        ),
      ),
      // 页面主体内容，避开导航栏区域
      Positioned(
        top: MediaQuery.of(context).padding.top + 44, // 44为Cupertino导航栏默认高度
        left: 0,
        right: 0,
        bottom: 0,
        child: YourPageContent(),
      ),
    ],
  ),
)

方案二：移除系统导航栏的模糊效果 #

如果想保留CupertinoNavigationBar的原生交互逻辑，可以通过Theme覆盖默认配置，去掉内置的模糊层：

CupertinoPageScaffold(
  navigationBar: Theme(
    data: ThemeData(
      cupertinoOverrideTheme: const CupertinoThemeData(
        barBackgroundColor: Colors.transparent,
      ),
    ),
    child: CupertinoNavigationBar(
      backgroundColor: Colors.transparent,
      border: Border.all(color: Colors.transparent), // 移除底部边框
      transitionBetweenRoutes: false, // 可选：关闭页面切换时的导航栏过渡动画
      leading: CupertinoButton(
        padding: EdgeInsets.zero,
        child: const Icon(CupertinoIcons.back),
        onPressed: () => Navigator.pop(context),
      ),
      middle: const Text('页面标题'),
    ),
  ),
  child: Stack(
    children: [
      Positioned.fill(
        child: Image.asset(
          'assets/your_header_image.png',
          fit: BoxFit.cover,
        ),
      ),
      // 页面内容添加顶部内边距，避开导航栏
      Padding(
        padding: EdgeInsets.only(
          top: MediaQuery.of(context).padding.top + 44,
        ),
        child: YourPageContent(),
      ),
    ],
  ),
)

方案三：使用CupertinoScaffold（非Tab场景适用） #

如果你的页面不在CupertinoTabScaffold嵌套内，可以用CupertinoScaffold替代CupertinoPageScaffold，它支持直接关闭模糊效果：

CupertinoScaffold(
  navigationBar: CupertinoNavigationBar(
    backgroundColor: Colors.transparent,
    border: null,
    blurEffect: null, // 关键：关闭内置模糊效果
  ),
  body: Stack(
    children: [
      Positioned.fill(
        child: Image.asset('assets/your_header_image.png', fit: BoxFit.cover),
      ),
      Padding(
        padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top + 44),
        child: YourPageContent(),
      ),
    ],
  ),
)

需要注意的是，导航栏完全透明后，要确保文字、图标颜色和背景图有足够对比度，保证内容可读性。

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