第四百零三回 如何获取屏幕相关参数

我们在上一章回中介绍了"自定义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类的成员值就可以；
• 不同的屏幕参数对应的不同的成员，有些成员在功能上相同，但是细节上不同；

看官们，与"如何获取屏幕相关参数"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!