Flutter Widget 之MediaQuery

如果要同时为手机和平板电脑编写app，你需要针对不同屏幕尺寸的UI布局

当用户偏好设置较大的字体或是想要最大程度地减少动画时，你可能会遇到类似的情况

有了MediaQuery 你可以获得有关所用设备的大小以及用户偏好设置的信息并对应地构建布局。

Layout Builder它可以告诉你特定widget有多少剩余空间

Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (context, contraints) {
            if (constraints.maxWidth < 600) {
                return MyOneColumnLayout();
            } else {
                return MyTwoColumnLayout();
            }
        }
    );
}

MediaQuery可以提供更高级的app屏幕尺寸视图并提供更多有关用户偏好设置的详细信息

实际操作时，MediaQuery始终存在，你只需在构建方法中调用MediaQuery.of即可对其进行访问

build(BuildCOntext context) {
    var deviceData = MediaQUery.of(context);
    ...
}

从那里，你可以查找有关正在运行的设备的各种有趣信息，例如屏幕尺寸，并相应地构建布局

build(BuildCOntext context) {
    var screenSize = MediaQuery.of(context).size;
    if (screenSize.width > oneColumnLayout) {

    } else {
        // one column layout
    }
}

MediaQuery还允许你检查设备的方向

build(BuildCOntext context) {
    var deviceOrientation = MediaQUery.of(context).orientation;
    ...
}

或确定用户是否修改了默认字体大小

build(BuildCOntext context) {
    var fontScaling = MediaQUery.of(context).textScaleFactor;
    ...
}

你还可以看到系统UI遮盖的屏幕部分就像较低级别的SafeArea widget一样

build(BuildCOntext context) {
    var notchInset = MediaQUery.of(context).padding;
    ...
}

你可以查找有趣的可及性信息，例如，设备是否要求限制动画

build(BuildCOntext context) {
    var noAnimation = MediaQUery.of(context).disableAnimations;
    ...
}

或者屏幕对比度级别

build(BuildCOntext context) {
    var screenContrast = MediaQUery.of(context).platdormBrightness;
    ...
}

如果想了解有关MediaQuery的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址