Flutter之SystemChrome全局设置

一、简介

SystemChrome作为一个全局属性,很像 Android 的 Application,功能很强大。

二、使用详解

2.1 setPreferredOrientations 设置屏幕方向

在我们日常应用中可能会需要设置横竖屏或锁定单方向屏幕等不同要求,通过 setPreferredOrientations 配合实现。

简单可以按 portraitUp 上 / portraitDown 下 / landscapeLeft 右 / landscapeRight 左 来区分。

注意:landscapeLeft 是以 portraitUp 顺时针旋转 90 度;landscapeRight 是以逆时针旋转 90 度,故是视觉相反。

单方向

若需要固定应用为单一方向,仅需设置所需要的方向属性即可。

|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| // 竖直上 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); // 竖直下 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]); // 水平左 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]); // 水平右 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]); |

多方向

若需要应用随重力感应变化方向,需设置多个方向属性。

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| // 竖直方向 SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]); // 水平方向 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft]); // 多方向 SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft, DeviceOrientation.portraitUp]); |

portraitDown 属性请注意,多方向时一般不会有效果,系统默认不会颠倒;

多方向设置时初始方向分两种情况,第一种:当前重力感应方向不在设置多方向列表中,初始方向为列表第一个设置方法;第二种:当前重力感应方向在设置多方向列表中,无论顺序第几位,默认均展示当前重力感应方向(非 portraitDown)。

2.2 setEnabledSystemUIOverlays 设置状态栏是否隐藏

是指定在应用程序运行时可见的系统叠加,主要对状态栏的操作,读起来比较拗口,但是看测试用例就很明了;参数分top 顶部 / bottom 底部 两种;

SystemUiOverlay.top

默认隐藏底部虚拟状态栏(需手机支持虚拟状态栏设备),即三大金刚键;获取焦点后展示状态栏,展示大小为去掉状态栏时整体大小;

|-------------------------------------------------------------------------|
| SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]); |

SystemUiOverlay.bottom

默认隐藏顶部虚拟状态栏,获取焦点后展示状态栏,展示大小为去掉状态栏时整体大小;

|----------------------------------------------------------------------------|
| SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); |

2.3 setSystemUIOverlayStyle 设置状态栏样式

setSystemUIOverlayStyle 用来设置状态栏顶部和底部样式,默认有 light 和 dark 模式,也可以按照需求自定义样式;

systemNavigationBarColor

该属性仅用于 Android 设备且 SDK >= O 时,底部状态栏颜色;

|------------------------------------------------------------------------------------------------------------|
| SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink)); |

systemNavigationBarDividerColor

该属性仅用于 Android 设备且 SDK >= P 时,底部状态栏与主内容分割线颜色,效果不是很明显;

|---------------------------------------------------------------------------------------------------------------------|
| SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarDividerColor: Colors.yellow)); |

systemNavigationBarIconBrightness

该属性仅用于 Android 设备且 SDK >= O 时,底部状态栏图标样式,主要是三大按键颜色;

|------------------------------------------------------------------------------------------------------------|
| SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink)); |

statusBarColor

该属性仅用于 Android 设备且 SDK >= M 时,顶部状态栏颜色;

|-------------------------------------------------------------------------------------------------|
| SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.red)); |

statusBarIconBrightness

该属性仅用于 Android 设备且 SDK >= M 时,顶部状态栏图标的亮度;

|---------------------------------------------------------------------------------------------------------------|
| SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark)); |

statusBarBrightness

该属性仅用于 iOS 设备顶部状态栏亮度;

|------------------------------------------------------------------------------------------------------------|
| SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarBrightness: Brightness.light)); |

2.4 setApplicationSwitcherDescription 设置状态切换显示

该属性显示效果是在应用程序切换器相关的应用程序的当前状态时。

整体来说 Flutter 对顶部底部状态栏的设置很方便。

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| SystemChrome.setApplicationSwitcherDescription( const ApplicationSwitcherDescription( label: "Demo Flutter", primaryColor: 0xFFE53935)) .then((_) { runApp(new MyApp()); }); |

相关推荐
Code-Porter4 小时前
记录关于Flutter ObjectBox数据库使用ObjectBoxBrowser插件,在同一个局域网内电脑无法访问查看数据问题
android·数据库·flutter·dart
钛态4 小时前
Flutter 组件 ews 的适配 鸿蒙Harmony 实战 - 深度对接企业级 Exchange 服务、实现鸿蒙端邮件与日程的高效分发及 SOAP 协议连接方案
flutter·harmonyos·鸿蒙·openharmony
亚历克斯神4 小时前
Flutter 三方库 jwt_io 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、严谨、全能的 JSON Web Token (JWT) 加解密与身份安全验证引擎
flutter·json·harmonyos
键盘鼓手苏苏4 小时前
Flutter for OpenHarmony:使用 typed_data 直击高性能底层数据操作核心
android·flutter·华为·自动化·harmonyos
加农炮手Jinx4 小时前
Flutter 组件 sse_stream 的适配 鸿蒙Harmony 深度进阶 - 驾驭高并发 Server-Sent Events 背压处理、实现鸿蒙端工业级 AI 响应流与长效链路治理方案
flutter·harmonyos·鸿蒙·openharmony·sse_stream
钛态4 小时前
Flutter 三方库 tftp 的鸿蒙化适配指南 - 实现 RFC 1350 标准的极简文件传输协议、支持端侧嵌入式设备固件更新与局域网数据交换实战
flutter·harmonyos·鸿蒙·openharmony
左手厨刀右手茼蒿4 小时前
Flutter for OpenHarmony:mailer — 基于 SMTP 的极速邮件投递服务(适配鸿蒙 HarmonyOS Next ohos)
android·flutter·华为·交互·harmonyos
雷帝木木4 小时前
Flutter 组件 metalink 的适配 鸿蒙Harmony 深度进阶 - 驾驭节点负载热力均衡、实现鸿蒙端跨域传输安全 (TLS) 与 HAP 原子化精准推送方案
flutter·harmonyos·鸿蒙·openharmony
亚历克斯神4 小时前
Flutter 三方库 eip55 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、严谨、符合 Web3 标准的以太坊地址校验与防串改引擎
flutter·web3·harmonyos
王码码20354 小时前
Flutter 三方库 soundcloud_explode_dart 的鸿蒙化适配指南 - 实现高性能的 SoundCloud 媒体内容解析、支持音频流下载与全量元数据透传
flutter·harmonyos·鸿蒙·openharmony·soundcloud_explode_dart