Flutter之SystemChrome全局设置

打印 上一主题 下一主题

主题 552|帖子 552|积分 1656

一、简介

SystemChrome作为一个全局属性,很像 Android 的 Application,功能很强大。
二、使用详解

2.1 setPreferredOrientations 设置屏幕方向

在我们日常应用中可能会必要设置横竖屏或锁定单方向屏幕等差异要求,通过 setPreferredOrientations 配合实现。
简单可以按 portraitUp 上 / portraitDown 下 / landscapeLeft 右 / landscapeRight 左 来区分。
注意:landscapeLeft 是以 portraitUp 顺时针旋转 90 度;landscapeRight 是以逆时针旋转 90 度,故是视觉相反。
单方向

若必要固定应用为单一方向,仅需设置所必要的方向属性即可。
  1. // 竖直上
  2. SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
  3. // 竖直下
  4. SystemChrome.setPreferredOrientations([DeviceOrientation.portraitDown]);
  5. // 水平左
  6. SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft]);
  7. // 水平右
  8. SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeRight]);
复制代码
多方向

若必要应用随重力感应变化方向,需设置多个方向属性。
  1. // 竖直方向
  2. SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]);
  3. // 水平方向
  4. SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft]);
  5. // 多方向
  6. SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeLeft, DeviceOrientation.portraitUp]);
复制代码
portraitDown 属性请注意,多方向时一般不会有效果,体系默认不会颠倒;
多方向设置时初始方向分两种情况,第一种:当前重力感应方向不在设置多方向列表中,初始方向为列表第一个设置方法;第二种:当前重力感应方向在设置多方向列表中,无论顺序第几位,默认均展示当前重力感应方向(非 portraitDown)。
2.2 setEnabledSystemUIOverlays 设置状态栏是否隐蔽

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

默认隐蔽底部假造状态栏(需手机支持假造状态栏装备),即三大金刚键;获取焦点后展示状态栏,展示巨细为去掉状态栏时整体巨细;
  1. SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);
复制代码
SystemUiOverlay.bottom


默认隐蔽顶部假造状态栏,获取焦点后展示状态栏,展示巨细为去掉状态栏时整体巨细;
  1. SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
复制代码
2.3 setSystemUIOverlayStyle 设置状态栏样式


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

该属性仅用于 Android 装备且 SDK >= O 时,底部状态栏颜色;
  1. SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));
复制代码
systemNavigationBarDividerColor


该属性仅用于 Android 装备且 SDK >= P 时,底部状态栏与主内容分割线颜色,效果不是很显着;
  1. SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarDividerColor: Colors.yellow));
复制代码
systemNavigationBarIconBrightness


该属性仅用于 Android 装备且 SDK >= O 时,底部状态栏图标样式,主要是三大按键颜色;
  1. SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(systemNavigationBarColor: Colors.pink));
复制代码
statusBarColor


该属性仅用于 Android 装备且 SDK >= M 时,顶部状态栏颜色;
  1. SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.red));
复制代码
statusBarIconBrightness

该属性仅用于 Android 装备且 SDK >= M 时,顶部状态栏图标的亮度;
  1. SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarIconBrightness: Brightness.dark));
复制代码
statusBarBrightness

该属性仅用于 iOS 装备顶部状态栏亮度;
  1. SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarBrightness: Brightness.light));
复制代码
2.4 setApplicationSwitcherDescription 设置状态切换显示

该属性显示效果是在应用程序切换器相关的应用程序的当前状态时。
整体来说 Flutter 对顶部底部状态栏的设置很方便。
  1. SystemChrome.setApplicationSwitcherDescription(
  2.         const ApplicationSwitcherDescription(
  3.             label: "Demo Flutter", primaryColor: 0xFFE53935))
  4.     .then((_) {
  5.   runApp(new MyApp());
  6. });
复制代码


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

科技颠覆者

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表