状态栏控制

Flutter_Tests

由于 flutter_statusbar_manager 已不再维护,本项目将重新发布,并会偶尔更新以继续用于现有项目。

关于

状态栏控制,可让您在 iOS 和 Android 上控制状态栏的颜色、样式(主题)、可见性和半透明属性。并为 Android 提供了一些额外的功能来控制导航栏。

此插件基于 React Native 的 StatusBar 组件。

导航栏代码取自出色的 flutter-screen-theme-plugin

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

最近更新

  • v3.2.0 重命名为 status_bar_control 并重新发布到 pub.dev
  • v3.1.2 为 Android 添加了 cutout 模式,并为演示应用程序添加了 SafeArea
  • v3.1.1 解决了 UIOverlay 弃用问题并更新了演示应用程序
  • v3.1.0 支持 Android V2,感谢 jWinterDayrafaelmaeuer
  • v3.0.1 兼容 Flutter Web,感谢 rafaelmaeuer
  • v3.0.0 支持空安全,感谢 NarHakobyan
  • v2.0.0 兼容 AndroidX,感谢 lorenzOliveto

有关完整的更改列表,请参阅 CHANGELOG

示例

请在 example 文件夹中构建 iOS 和 Android 的示例项目。

Android

状态栏颜色 隐藏状态栏 导航栏
Demo App Android Status Bar Demo App Android Status Bar hide Demo App Android Nav Bar

iOS

iPhone 8 演示 iPhone X 演示
Demo App Iphone 8 Demo App Iphone X

注意:并非所有展示的示例在最新版本的 Android 或 iOS 上仍然有效

安装

status_bar_control: ^3.2.1

到您的 pubspec.yaml 文件中,然后运行

flutter pub get

在您的项目根目录中。

基本用法

使用命令创建一个新项目

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:status_bar_control/status_bar_control.dart';

方法

setColor

平台:Android

setColor 方法将设置状态栏的背景颜色。在 iOS 上,该方法将始终返回一个成功的 Future

参数 类型 默认值 必需 描述
color 颜色 要设置为背景的颜色,可以使用带有透明度的颜色。
animated 布尔值 是否为颜色更改设置动画。
await StatusBarControl.setColor(Colors.green, animated:true);

setTranslucent

平台:Android

setTranslucent 方法将设置状态栏的半透明状态。在 iOS 上,该方法将始终返回一个成功的 Future

参数 类型 默认值 必需 描述
translucent 布尔值 状态栏是否将是半透明的。
await StatusBarControl.setTranslucent(true);

setHidden

平台:Android, iOS

setHidden 将隐藏状态栏。

参数 类型 默认值 必需 描述
hidden 布尔值 是否隐藏状态栏。
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 布尔值 是否显示活动指示器。
await StatusBarControl.setNetworkActivityIndicatorVisible(true);

getHeight

平台:Android, iOS

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

double height = await StatusBarControl.getHeight

附加方法

setNavigationBarColor

平台:Android

setNavigationBarColor 方法将设置导航栏的背景颜色。在 iOS 上,该方法将始终返回一个成功的 Future

参数 类型 默认值 必需 描述
color 颜色 要设置为背景的颜色。
animated 布尔值 是否为颜色更改设置动画。
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 布尔值 应用程序是否将设置为全屏模式。
await StatusBarControl.setNavigationBarStyle(NavigationBarStyle.DARK);

枚举

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) 及以上:样式 (深色/浅色)

GitHub

查看 Github