开发者社区> 阿策~> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Flutter 41: 图解神秘的 SystemChrome

简介: 0 基础学习 Flutter,第四十一步:学习了解全局 SystemChrome~
+关注继续查看

      小菜在切换横竖屏时用到 SystemChrome,小菜理解它作为一个全局属性,很像 AndroidApplication,功能很强大。

setPreferredOrientations

      在我们日常应用中可能会需要设置横竖屏,或锁定单方向屏幕等不同要求,通过 setPreferredOrientations 配合实现;简单可以按 portraitUp 上 / portraitDown 下 / landscapeLeft 右 / landscapeRight 左 来区分;

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

1. 单方向

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

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

2. 多方向

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

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

Tips:

  1. portraitDown 属性请注意,多方向时一般不会有效果,系统默认不会颠倒;
  2. 多方向设置时初始方向分两种情况,第一种:当前重力感应方向不在设置多方向列表中,初始方向为列表第一个设置方法;第二种:当前重力感应方向在设置多方向列表中,无论顺序第几位,默认均展示当前重力感应方向(非 portraitDown)。

setEnabledSystemUIOverlays

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

1. SystemUiOverlay.top

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

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

2. SystemUiOverlay.bottom

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

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

3. 两者皆有

      即默认情况,顶部底部状态栏均展示;

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);

setSystemUIOverlayStyle

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

1. systemNavigationBarColor

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

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

2. systemNavigationBarDividerColor

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

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

3. systemNavigationBarIconBrightness

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

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

4. statusBarColor

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

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

5. statusBarIconBrightness

      该属性仅用于 Android 设备且 SDK >= M 时,顶部状态栏图标的亮度;但小菜感觉并不明显;

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

6. statusBarBrightness

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

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

setApplicationSwitcherDescription

      小菜个人理解该属性显示效果是在应用程序切换器相关的应用程序的当前状态时,但是小菜反复测试并没有实际效果,希望有理解的大神多多指点;

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

      整体来说 Flutter 对顶部底部状态栏的设置很方便,只是有些小菜理解不够深入的地方,有见解对朋友希望多多指导!

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Flutter如何调试应用【Dart Observatory 】以及调试模式断言
Flutter如何调试应用【Dart Observatory 】以及调试模式断言
0 0
Flutter(三)——一篇文章掌握Dart语言的用法(三)
Flutter(三)——一篇文章掌握Dart语言的用法(三)
0 0
Flutter(三)——一篇文章掌握Dart语言的用法(一)
Flutter(三)——一篇文章掌握Dart语言的用法(一)
0 0
Flutter(三)——一篇文章掌握Dart语言的用法(二)
Flutter(三)——一篇文章掌握Dart语言的用法(二)
0 0
[Flutter]足够入门的Dart语言系列之面向对象:类之间的6大关系
无论是面向对象编程,还是面向过程、函数式编程,代码与代码之间的组织关系都是最重要的。通过代码的编写、代码间的相互调用、不同代码的合理使用、集合不同的数据和方法,才能...
0 0
[Flutter]足够入门的Dart语言系列之面向对象:类成员的可见性、常量和工厂构造函数详解
类和成员的可见性,这在基于库或包的开发中非常重要,Dart中提供了工厂构造函数,可以方便的实现单例、缓存实例对象、返回子类等,以及常量构造函数的使用......
0 0
[Flutter]足够入门的Dart语言系列之面向对象:类的定义详解、成员和实例使用
类表示的是分类,一类问题或事物,它是对具体或现实世界的抽象。比如动物类、犬科动物类、猫科动物类、房子类、数学类,类是具体事物的描述,它不是指具体的某个动物、某栋房子、某个数学题,而是对它们的概括...
0 0
[Flutter]足够入门的Dart语言系列之函数:匿名函数、作用域闭包、类型别名和内联函数类型
函数在Dart中是对象,因此,可以将函数作为参数传递给另一个函数、作为一个'值'赋值给一个变量。下面主要介绍匿名函数、内联函数类型的使用,以及了解下作用域和闭包...
0 0
[Flutter]足够入门的Dart语言系列之函数:函数定义、调用、5种参数类型和main函数
函数(Function)也被称为方法(Method)。其最直观的理解就是数据中的函数,比如y=f(x),在编程中,f对输入x进行处理,返回结果y,就是一个函数......
0 0
[Flutter]足够入门的Dart语言系列之常见运算符或操作符
Dart中的运算符提供对数据操作和处理的能力,其中的算术运算符、逻辑运算符非常符合现实中的使用情况,其他不同的运算符则有着自己的操作逻辑...
0 0
+关注
阿策~
Android/Kotlin/Flutter 小菜鸟,基础技术博客学习与整理~
文章
问答
文章排行榜
最热
最新
相关电子书
更多
React-Native 在iOS上的性能优化方案
立即下载
UI2CODE智能生成flutter代码--整体架构 【上叶】
立即下载
Flutter in action
立即下载