Flutter中如何使CupertinoPageScaffold的statusBar背景透明

在Flutter中使用CupertinoPageScaffold时，如何让statusBar的背景变成透明？我尝试设置navigationBar的backgroundColor为透明色，但statusBar部分仍然显示默认的灰色背景。请问有没有办法能实现完全透明的状态栏效果？需要针对iOS平台进行适配。

2 回复

在CupertinoPageScaffold中设置backgroundColor: Colors.transparent，并确保navigationBar的backgroundColor也为Colors.transparent，即可实现状态栏背景透明。

更多关于Flutter中如何使CupertinoPageScaffold的statusBar背景透明的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，要使 CupertinoPageScaffold 的 statusBar 背景透明，可以通过设置 SystemChrome 的 setSystemUIOverlayStyle 方法来实现。以下是具体步骤：

  1. 导入依赖：

    import 'package:flutter/services.dart';

  2. 设置状态栏透明： 在 initState 或 build 方法中调用以下代码：

    SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(
    statusBarColor: Colors.transparent, // 设置状态栏背景透明
  ),
);

  3. 完整示例：

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

class TransparentStatusBarPage extends StatefulWidget {
  @override
  _TransparentStatusBarPageState createState() => _TransparentStatusBarPageState();
}

class _TransparentStatusBarPageState extends State<TransparentStatusBarPage> {
  @override
  void initState() {
    super.initState();
    // 设置状态栏透明
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('透明状态栏示例'),
      ),
      child: Container(
        color: CupertinoColors.systemBackground,
        child: Center(
          child: Text('内容区域'),
        ),
      ),
    );
  }
}

注意事项：

  • 此设置会影响整个应用的状态栏样式，如需恢复，可在页面销毁时重置。
  • 在 iOS 上，状态栏文字颜色默认为黑色，可通过 SystemUiOverlayStyle 的 statusBarBrightness 调整（例如 Brightness.light 使文字变白）。

通过以上方法，即可实现 CupertinoPageScaffold 状态栏背景透明。

回到顶部