使用 Flutter SystemChrome

简介: 使用 Flutter SystemChrome

SystemChrome 控制操作系统图形界面的特定方面以及它如何与应用程序交互。需要注意的是在使用的时候一定要保证先执行 WidgetsFlutterBinding.ensureInitialized();

setPreferredOrientations 设置横屏或坚屏

一般我们显示是要强制坚屏,只需要指定 DeviceOrientation.portraitUp 就够了。

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
复制代码

不需要再加上 DeviceOrientation.portraitDown,因为加上也不会有效果。

SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,DeviceOrientation.portraitDown]);
复制代码

这样写也可以,只有后面的 portraitDown 有点多余,如果可以的话,系统不允许在竖直方向倒过来,所以即使是手机设置中没有打开方向锁定,也不用担心会倒过来。

如果想在竖直方向倒过来,可以只指定 portraitDown。这样画面就会一直倒置。

SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);
复制代码

如果想设置画面水平一般会同时设置两个。当手机反转的时候,画面也可以随着反转。(没有设置锁定的情况下)

SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight]);
复制代码

只有禁用多任务处理时,此设置才会在 iPad 上生效。

setEnabledSystemUIMode 设置全屏显示

用 manual 的方式可以指定显下面或下面的 overlay,或都不显示。

//都不显示,全屏
 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: []);
 //显示上面
 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: [SystemUiOverlay.top]);
 //显示下面
 SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: [SystemUiOverlay.bottom]);
复制代码

setSystemUIOverlayStyle 设置 overlay 样式,

overlay 的显示样式,比如可以显示 dark style

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
复制代码

android 有效,ios 可能没有效果。

如果有的设置没生效,可以重新启动 app 试试

全屏播放视频

如果要全屏播放视频可以做如下设置,横屏,并去掉 overlays。

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,overlays: []);
 SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeLeft,DeviceOrientation.landscapeRight]);
复制代码

setSystemUIChangeCallback

只在 android  有效,SystemUiMode 设置 SystemUiMode.leanBackSystemUiMode.immersiveSystemUiMode.immersiveSticky 的时候, overlays 会随着与用户交互消失或出现,可以监听 setSystemUIChangeCallback 让 overlays 自动恢复原来的状态。

WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
SystemChrome.setSystemUIChangeCallback((systemOverlaysAreVisible) async {
  await Future.delayed(const Duration(seconds: 1));
  SystemChrome.restoreSystemUIOverlays();
});
复制代码

AnnotatedRegion

如果想控制 status bar 的样式还可以用 AnnotatedRegion,需要注意的是,使用 AnnotatedRegion 就不要使用 AppBar了,否则会被 AppBar了 覆盖。

AnnotatedRegion(
    child: Text('IAM17'),
    value: SystemUiOverlayStyle(
        statusBarColor: Colors.green,
        statusBarIconBrightness: Brightness.light,
        //底部navigationBar背景颜色
        systemNavigationBarColor: Colors.white),
  )


目录
相关文章
|
6月前
Flutter 之 Stepper
Flutter 之 Stepper Stepper 组件在移动端应用中经常被使用,它可以让用户通过一系列步骤来完成一个复杂的操作。Flutter 中的 Stepper 组件提供了一个简单的方式来实现这个功能。
|
6月前
Flutter中的OverflowBox、SizedOverflowBox,详细介绍
Flutter中的OverflowBox、SizedOverflowBox,详细介绍 在Flutter中,当一个widget的大小超出了其父widget的大小时,通常会发生溢出现象。为了解决这个问题,Flutter提供了两个widget:OverflowBox和SizedOverflowBox。
211 0
|
Dart 开发工具 Android开发
Flutter
Flutter 是 Google 开发的一款开源 UI 工具包,它可以帮助开发者使用一套代码库快速构建美观且高性能的 Android 和 iOS 应用程序。Flutter 具有热重载(Hot Reload)和快速应用程序开发(Rapid Application Development)的特点,使得开发过程更加高效。
154 6
flutter系列之:使用SliverList和SliverGird
在上一篇文章我们讲解SliverAppBar的时候有提到过,Sliver的组件一般都用在CustomScrollView中。除了SliverAppBar之外,我们还可以为CustomScrollView添加List或者Grid来实现更加复杂的组合效果。 今天要向大家介绍的就是SliverList和SliverGird。
flutter系列之:使用SliverList和SliverGird
|
Dart 前端开发 JavaScript
Flutter快速了解
Flutter是Google开发的一套全新的跨平台、开源UI框架,支持iOS、Android系统开发,并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来,目前Flutter已经发布了近60个版本,并且在2018年5月发布了第一个“Ready for Production Apps”的Beta 3版本,6月20日发布了第一个“Release Preview”版本。
使用 Flutter LinearGradient
使用 Flutter LinearGradient
443 0
使用 Flutter LinearGradient
|
监控 JavaScript 前端开发
使用 Flutter Navigator2.0 最舒服的姿势
使用 Flutter Navigator2.0 最舒服的姿势
306 0
使用 Flutter Navigator2.0 最舒服的姿势
|
缓存 开发工具 git
flutter技巧
flutter技巧