文章目录
- 1. 概念介绍
- 2. 思路与方法
- 2.1 整体思路
- 2.2 使用方法
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了"自定义Action菜单"相关的内容,本章回中将介绍如何获取屏幕相关参数.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在本章回中介绍的屏幕参数主要指屏幕的尺寸、方向和亮度。这些参数在程序开发中会被用到,当然了使用频率最高的要数屏幕的尺寸。本章回中将详细介绍获取这些
参数的方法,同时分享一些相关的经验。
2. 思路与方法
2.1 整体思路
获取屏幕参数的思路就是读取屏幕的参数值,这时需要使用MediaQueryData类的成员,这些成员中包含了相关的屏幕参数值,开发人员只需要获取到这些值就可以。常
用的成员如下所示:
- viewInsets:它表示被系统功能界面遮挡的功能区域大小,比如常见的键盘区域大小;
- viewPadding:它表示页面最上方的状态栏和底部安全区域的大小;
- padding:它和viewPadding功能相同,只是在细节上有差别;
- size:它表示屏幕的大小,也就是通常说的屏幕分辨率;
我们在上面中提到了viewPadding和padding成员在细节上有差别,主要的差别在于padding中bottom的值会在键盘弹出后变为0,而viewPadding中botttom的
值不会变。
2.2 使用方法
有了思路后,我们介绍具体的实现方法,详细如下:
- 通过MediaQuery的of方法获取MediaQueryData对象;
- 在MediaQueryData对象中获取相应的成员;
- 在成员中读取屏幕参数值;
3. 示例代码
double statusBarHeight = MediaQuery.of(context).padding.top;
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
上面的示例代码中演示了如何获取屏幕的长度和宽度,其它的屏幕参数大家可以自己动手去获取。我们在这里就不演示了,我们重点说一下top对应值,它表示屏幕最上方
状态栏的高度,就是显示手机信号所在区域的高度,很多人容易把页面上方AppBar的高度与它混淆。其实它的高度值大约是AppBar的一半,比如我在自己的真机上测试
后发现top对应的值是36,而且AppBar的高度值是56。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- 屏幕参数主要存放在MediaQueryData类的成员中;
- 获取屏幕参数时直接读取MediaQueryData类的成员值就可以;
- 不同的屏幕参数对应的不同的成员,有些成员在功能上相同,但是细节上不同;
看官们,与"如何获取屏幕相关参数"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!