Flutter状态栏控制插件sp_status_bar_control的使用

关于

sp_status_bar_control 可以让你跨iOS和Android平台控制状态栏的颜色、样式（主题）、可见性和半透明属性。此外，在Android上还可以控制导航栏。

该插件基于React Native的StatusBar组件。导航栏代码来自出色的flutter-screen-theme-plugin。

该插件在iOS 15和Android 12 (API 31) 上进行了测试。

示例

构建iOS和Android的示例项目，请从example文件夹中获取。

Android

状态栏颜色	状态栏隐藏	导航栏

iOS

iPhone 8演示	iPhone X演示

注意：并非所有示例在最新的Android或iOS版本中都可能仍然有效。

安装

在你的pubspec.yaml文件中添加以下内容：

dependencies:
  sp_status_bar_control: ^3.2.1

然后运行以下命令以安装依赖项：

flutter pub get

基本用法

创建一个新的Flutter项目：

flutter create myapp

在iOS中，如果你还没有在Info.plist中添加以下内容，请添加：

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

在Android中，如果你还没有在styles.xml中添加以下内容，请添加（API > 27时使用cutout-mode）：

<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>

在lib/main.dart中导入插件：

import 'package:sp_status_bar_control/sp_status_bar_control.dart';

方法

setColor

平台: Android

setColor方法用于设置状态栏背景颜色。在iOS中，该方法总是返回成功的Future。

参数	类型	默认值	必须	描述
color	`Color`	无	是	要设置为背景的颜色，可以使用带不透明度的颜色。
animated	`bool`	false	否	是否要动画化颜色变化。

示例代码：

await StatusBarControl.setColor(Colors.green, animated:true);

setTranslucent

平台: Android

setTranslucent方法用于设置状态栏是否为半透明。在iOS中，该方法总是返回成功的Future。

参数	类型	默认值	必须	描述
translucent	`bool`	无	是	是否要使状态栏半透明。

示例代码：

await StatusBarControl.setTranslucent(true);

setHidden

平台: Android, iOS

setHidden方法将隐藏状态栏。

参数	类型	默认值	必须	描述
hidden	`bool`	无	是	是否要隐藏状态栏。
animation	`StatusBarAnimation`	`StatusBarAnimation.NONE`	否	使用的隐藏动画（仅限iOS）。

示例代码：

await StatusBarControl.setHidden(true, animation:StatusBarAnimation.SLIDE);

setStyle

平台: Android, iOS

setStyle方法将设置状态栏的主题。

参数	类型	默认值	必须	描述
style	`StatusBarStyle`	无	是	要使用的状态栏主题，可以是light、dark、default。

示例代码：

await StatusBarControl.setStyle(StatusBarStyle.DARK_CONTENT);

setNetworkActivityIndicatorVisible

平台: iOS

setNetworkActivityIndicatorVisible方法将显示或隐藏活动指示器。在Android中，该方法总是返回成功的Future。

参数	类型	默认值	必须	描述
visible	`bool`	无	是	是否要显示活动指示器。

示例代码：

await StatusBarControl.setNetworkActivityIndicatorVisible(true);

getHeight

平台: Android, iOS

getHeight方法将返回状态栏的高度。

示例代码：

double height = await StatusBarControl.getHeight;

额外的方法

setNavigationBarColor

平台: Android

setNavigationBarColor方法将设置导航栏背景颜色。在iOS中，该方法总是返回成功的Future。

参数	类型	默认值	必须	描述
color	`Color`	无	是	要设置为背景的颜色。
animated	`bool`	false	否	是否要动画化颜色变化。

示例代码：

await StatusBarControl.setNavigationBarColor(Colors.green, animated:true);

setNavigationBarStyle

平台: Android

setNavigationBarStyle方法将设置导航栏的主题。

参数	类型	默认值	必须	描述
style	`NavigationBarStyle`	无	是	要使用的导航栏主题，可以是light、dark、default。

示例代码：

await StatusBarControl.setNavigationBarStyle(NavigationBarStyle.DARK);

setFullscreen

平台: Android, iOS

setFullscreen方法将设置应用程序全屏模式。

参数	类型	默认值	必须	描述
fullscreen	`bool`	无	是	是否要设置应用程序全屏模式。

示例代码：

await StatusBarControl.setFullscreen(true);

枚举

StatusBarStyle

StatusBarStyle.DEFAULT
StatusBarStyle.LIGHT_CONTENT
StatusBarStyle.DARK_CONTENT

StatusBarAnimation

StatusBarAnimation.NONE
StatusBarAnimation.FADE
StatusBarAnimation.SLIDE

NavigationBarStyle

NavigationBarStyle.DEFAULT
NavigationBarStyle.DARK
NavigationBarStyle.LIGHT

状态栏

兼容性: Android (6.0+) & iOS

在Android上，它只适用于Android 6.0 (Marshmallow)及更高版本设备。

导航栏

兼容性: 仅限Android

Android 5.0 (Lollipop)及以上: 颜色

Android 8.0 (Oreo)及以上: 主题（深色/浅色）

示例代码

以下是完整的示例代码：

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

import 'package:sp_status_bar_control/sp_status_bar_control.dart';

void main() => runApp(const StatusBarControlApp());

class StatusBarControlApp extends StatefulWidget {
  const StatusBarControlApp({Key? key}) : super(key: key);

  factory StatusBarControlApp.forDesignTime() {
    return const StatusBarControlApp();
  }

  [@override](/user/override)
  _StatusBarControlAppState createState() => _StatusBarControlAppState();
}

class _StatusBarControlAppState extends State<StatusBarControlApp> {
  double? _statusBarHeight = 0.0;
  bool _statusBarColorAnimated = false;
  Color? _statusBarColor = Colors.black;
  double _statusBarOpacity = 1.0;
  bool _statusBarHidden = false;
  StatusBarAnimation _statusBarAnimation = StatusBarAnimation.NONE;
  StatusBarStyle _statusBarStyle = StatusBarStyle.DEFAULT;
  bool _statusBarTranslucent = false;
  bool _loadingIndicator = false;
  bool _fullscreenMode = false;

  bool _navBarColorAnimated = false;
  Color? _navBarColor = Colors.black;
  NavigationBarStyle? _navBarStyle = NavigationBarStyle.DEFAULT;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，所以我们初始化在一个异步方法中。
  Future<void> initPlatformState() async {
    double? statusBarHeight;
    // 平台消息可能会失败，所以我们使用try/catch来处理PlatformException。
    try {
      statusBarHeight = await StatusBarControl.getHeight;
    } on PlatformException {
      statusBarHeight = 0.0;
    }
    if (!mounted) return;

    setState(() {
      _statusBarHeight = statusBarHeight;
    });
  }

  Widget renderTitle(String text) {
    const textStyle = TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold);
    return Text(text, style: textStyle);
  }

  void colorBarChanged(Color val) {
    setState(() {
      _statusBarColor = val;
    });
    updateStatusBar();
  }

  void updateStatusBar() {
    StatusBarControl.setColor(
        _statusBarColor!.withOpacity(_statusBarOpacity),
        animated: _statusBarColorAnimated);
  }

  void statusBarAnimationChanged(StatusBarAnimation val) {
    setState(() {
      _statusBarAnimation = val;
    });
  }

  void statusBarStyleChanged(StatusBarStyle val) {
    setState(() {
      _statusBarStyle = val;
    });
    StatusBarControl.setStyle(val);
  }

  void colorNavBarChanged(Color val) {
    setState(() {
      _navBarColor = val;
    });
    updateNavBar();
  }

  void updateNavBar() {
    StatusBarControl.setNavigationBarColor(_navBarColor!,
        animated: _navBarColorAnimated);
  }

  void navigationBarStyleChanged(NavigationBarStyle val) {
    setState(() {
      _navBarStyle = val;
    });
    StatusBarControl.setNavigationBarStyle(val);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('Statusbar Control Example'),
          ),
          body: SafeArea(
            child: Scrollbar(
              child: ListView(
                padding:
                const EdgeInsets.symmetric(vertical: 15.0, horizontal: 20.0),
                children: <Widget>[
                  renderTitle("状态栏高度: $_statusBarHeight"),
                  const Divider(height: 25.0),
                  renderTitle("状态栏颜色 (Android):"),
                  SwitchListTile(
                    value: _statusBarColorAnimated,
                    title: const Text("动画:"),
                    onChanged: (bool value) {
                      setState(() {
                        _statusBarColorAnimated = value;
                      });
                    },
                  ),
                  const Text("颜色:"),
                  RadioListTile(
                      value: Colors.black,
                      title: const Text("黑色"),
                      onChanged: (Color? v) => colorBarChanged(v!),
                      dense: true,
                      groupValue: _statusBarColor),
                  RadioListTile(
                      value: Colors.orange,
                      title: const Text("橙色"),
                      onChanged: (Color? v) => colorBarChanged(v!),
                      dense: true,
                      groupValue: _statusBarColor),
                  RadioListTile(
                      value: Colors.greenAccent,
                      title: const Text("绿色"),
                      onChanged: (Color? v) => colorBarChanged(v!),
                      dense: true,
                      groupValue: _statusBarColor),
                  RadioListTile(
                      value: Colors.white30,
                      title: const Text("白色"),
                      onChanged: (Color? v) => colorBarChanged(v!),
                      dense: true,
                      groupValue: _statusBarColor),
                  const Text("不透明度:"),
                  Slider(
                    value: _statusBarOpacity,
                    min: 0.0,
                    max: 1.0,
                    onChanged: (double val) {
                      setState(() {
                        _statusBarOpacity = val;
                      });
                      updateStatusBar();
                    },
                  ),
                  const Divider(height: 25.0),
                  renderTitle("状态栏隐藏:"),
                  SwitchListTile(
                    title: const Text("隐藏:"),
                    value: _statusBarHidden,
                    onChanged: (bool val) {
                      setState(() {
                        _statusBarHidden = val;
                      });
                      StatusBarControl.setHidden(_statusBarHidden,
                          animation: _statusBarAnimation);
                    },
                  ),
                  const Text("动画 (iOS):"),
                  RadioListTile(
                      value: StatusBarAnimation.NONE,
                      title: const Text("NONE"),
                      onChanged: (StatusBarAnimation? v) =>
                          statusBarAnimationChanged(v!),
                      dense: true,
                      groupValue: _statusBarAnimation),
                  RadioListTile(
                      value: StatusBarAnimation.FADE,
                      title: const Text("FADE"),
                      onChanged: (StatusBarAnimation? v) =>
                          statusBarAnimationChanged(v!),
                      dense: true,
                      groupValue: _statusBarAnimation),
                  RadioListTile(
                      value: StatusBarAnimation.SLIDE,
                      title: const Text("SLIDE"),
                      onChanged: (StatusBarAnimation? v) =>
                          statusBarAnimationChanged(v!),
                      dense: true,
                      groupValue: _statusBarAnimation),
                  const Divider(height: 25.0),
                  renderTitle("状态栏风格:"),
                  RadioListTile(
                      value: StatusBarStyle.DEFAULT,
                      title: const Text("DEFAULT"),
                      onChanged: (StatusBarStyle? v) =>
                          statusBarStyleChanged(v!),
                      dense: true,
                      groupValue: _statusBarStyle),
                  RadioListTile(
                      value: StatusBarStyle.LIGHT_CONTENT,
                      title: const Text("LIGHT_CONTENT"),
                      onChanged: (StatusBarStyle? v) =>
                          statusBarStyleChanged(v!),
                      dense: true,
                      groupValue: _statusBarStyle),
                  RadioListTile(
                      value: StatusBarStyle.DARK_CONTENT,
                      title: const Text("DARK_CONTENT"),
                      onChanged: (StatusBarStyle? v) =>
                          statusBarStyleChanged(v!),
                      dense: true,
                      groupValue: _statusBarStyle),
                  const Divider(height: 25.0),
                  renderTitle("状态栏半透明 (Android):"),
                  SwitchListTile(
                    title: const Text("半透明:"),
                    value: _statusBarTranslucent,
                    onChanged: (bool val) {
                      setState(() {
                        _statusBarTranslucent = val;
                      });
                      StatusBarControl.setTranslucent(_statusBarTranslucent);
                    },
                  ),
                  const Divider(height: 25.0),
                  renderTitle("状态栏活动指示器 (iOS):"),
                  SwitchListTile(
                    title: const Text("指示器:"),
                    value: _loadingIndicator,
                    onChanged: (bool val) {
                      setState(() {
                        _loadingIndicator = val;
                      });
                      StatusBarControl.setNetworkActivityIndicatorVisible(
                          _loadingIndicator);
                    },
                  ),
                  const Divider(height: 25.0),
                  renderTitle("导航栏颜色 (Android):"),
                  SwitchListTile(
                    value: _navBarColorAnimated,
                    title: const Text("动画:"),
                    onChanged: (bool value) {
                      setState(() {
                        _navBarColorAnimated = value;
                      });
                    },
                  ),
                  const Text("颜色:"),
                  RadioListTile(
                      value: Colors.black,
                      title: const Text("黑色"),
                      onChanged: (Color? v) => colorNavBarChanged(v!),
                      dense: true,
                      groupValue: _navBarColor),
                  RadioListTile(
                      value: Colors.orange,
                      title: const Text("橙色"),
                      onChanged: (Color? v) => colorNavBarChanged(v!),
                      dense: true,
                      groupValue: _navBarColor),
                  RadioListTile(
                      value: Colors.greenAccent,
                      title: const Text("绿色"),
                      onChanged: (Color? v) => colorNavBarChanged(v!),
                      dense: true,
                      groupValue: _navBarColor),
                  RadioListTile(
                      value: Colors.white12,
                      title: const Text("白色"),
                      onChanged: (Color? v) => colorNavBarChanged(v!),
                      dense: true,
                      groupValue: _navBarColor),
                  const Divider(height: 25.0),
                  renderTitle("导航栏风格 (Android):"),
                  RadioListTile(
                      value: NavigationBarStyle.DEFAULT,
                      title: const Text("DEFAULT"),
                      onChanged: (NavigationBarStyle? v) =>
                          navigationBarStyleChanged(v!),
                      dense: true,
                      groupValue: _navBarStyle),
                  RadioListTile(
                      value: NavigationBarStyle.LIGHT,
                      title: const Text("LIGHT"),
                      onChanged: (NavigationBarStyle? v) =>
                          navigationBarStyleChanged(v!),
                      dense: true,
                      groupValue: _navBarStyle),
                  RadioListTile(
                      value: NavigationBarStyle.DARK,
                      title: const Text("DARK"),
                      onChanged: (NavigationBarStyle? v) =>
                          navigationBarStyleChanged(v!),
                      dense: true,
                      groupValue: _navBarStyle),
                  const Divider(height: 25.0),
                  renderTitle("全屏模式:"),
                  SwitchListTile(
                    title: const Text("全屏:"),
                    value: _fullscreenMode,
                    onChanged: (bool val) {
                      setState(() {
                        _fullscreenMode = val;
                      });
                      StatusBarControl.setFullscreen(_fullscreenMode);
                    },
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}

更多关于Flutter状态栏控制插件sp_status_bar_control的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼

更多关于Flutter状态栏控制插件sp_status_bar_control的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何使用 sp_status_bar_control 插件来控制 Flutter 应用状态栏的示例代码。这个插件允许你更改状态栏的颜色、亮度等属性。

首先，确保你的 pubspec.yaml 文件中已经添加了 sp_status_bar_control 依赖：

dependencies:
  flutter:
    sdk: flutter
  sp_status_bar_control: ^最新版本号  # 请替换为实际最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用这个插件。以下是一个简单的示例，展示如何更改状态栏的颜色和样式：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
    // 设置状态栏颜色为白色，状态栏文字为深色模式
    SpStatusBarControl.setStatusBarColor(Colors.white, brightness: Brightness.dark);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('状态栏控制示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 设置状态栏颜色为黑色，状态栏文字为浅色模式
                SpStatusBarControl.setStatusBarColor(Colors.black, brightness: Brightness.light);
              },
              child: Text('设置状态栏为黑色'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 设置状态栏为透明，并允许状态栏文字跟随系统主题
                SpStatusBarControl.setStatusBarTransparent();
              },
              child: Text('设置状态栏为透明'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

在 initState 方法中，我们调用 SpStatusBarControl.setStatusBarColor 方法来设置状态栏的颜色为白色，并将状态栏文字设置为深色模式。
我们创建了两个按钮，一个用于将状态栏颜色设置为黑色并将文字设置为浅色模式，另一个用于将状态栏设置为透明并允许文字跟随系统主题。

这样，你就可以通过点击按钮来动态更改 Flutter 应用的状态栏样式了。请确保你已经正确导入了 sp_status_bar_control 插件，并根据你的需求调整代码。

Flutter状态栏控制插件sp_status_bar_control的使用

Flutter状态栏控制插件sp_status_bar_control的使用

关于

最近更新

示例

Android

iOS

安装

基本用法

方法

setColor

平台: Android

setTranslucent

平台: Android

setHidden

平台: Android, iOS

setStyle

平台: Android, iOS

setNetworkActivityIndicatorVisible

平台: iOS

getHeight

平台: Android, iOS

额外的方法

setNavigationBarColor

平台: Android

setNavigationBarStyle

平台: Android

setFullscreen

平台: Android, iOS

枚举

StatusBarStyle

StatusBarAnimation

NavigationBarStyle

状态栏

导航栏

示例代码