Flutter 中获取屏幕以及 Widget 的宽高

),
);
}
}

在代码中，我们是想获取屏幕的宽和高，然后将屏幕宽高的一半分别赋值给 Container 的宽和高，但上述代码并不能成功运行，会报如下错误：

flutter: The following assertion was thrown building GetWidgetWidthAndHeiget(dirty):
flutter: MediaQuery.of() called with a context that does not contain a MediaQuery.
flutter: No MediaQuery ancestor could be found starting from the context that was passed to MediaQuery.of().
flutter: This can happen because you do not have a WidgetsApp or MaterialApp widget (those widgets introduce
flutter: a MediaQuery), or it can happen if the context you use comes from a widget above those widgets.

从错误异常中我们可以大概了解到有两种情况会导致上述异常：

1. 当没有 WidgetsApp or MaterialApp 的时候，我们使用 MediaQuery.of(context) 来获取数据。
2. 当我们在当前小部件中使用了上一个小部件的 context，来使用 MediaQuery.of(context) 获取数据的时候。

我们上述的代码很显然是属于第一种情况，也就是说我们在使用 MediaQuery.of(context) 的地方并没有一个 WidgetsApp or MaterialApp 来提供数据。

解决方法就是将 MediaQuery.of(context) 挪到 MaterialApp 内，如下：

import ‘package:flutter/material.dart’;

class GetWidgetWidthAndHeiget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}

class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;
final height = size.height;
print(‘width is $width; height is $height’);
return Scaffold(
appBar: AppBar(
title: Text(‘Width & Height’),
),
body: Center(
child: Container(
color: Colors.redAccent,
width: width / 2,
height: height / 2,
),
),
);
}
}

运行效果及输出如下：

flutter: width is 414.0; height is 896.0

上述代码中，我们获取的是 MaterialApp 的宽高，也就是屏幕的宽高

还有一种是直接使用 dart:ui 包中的 window 对象（这里非常感谢 XuYanjun Android @ 苏宁 提出的方法），这种方法使用起来也比较简单，如下：

import ‘dart:ui’;

final width = window.physicalSize.width;
final height = window.physicalSize.height;

那么如果我们要需要知道上述红色的 Container 容器的宽高怎么办呢？这里我们可以使用 GlobalKey

GlobalKey

使用 GlobalKey 的步骤如下：

1. 声明一个 GlobalKey final GlobalKey globalKey = GlobalKey();

2. 给 widget 设置 GlobalKey key: globalKey

3. 通过 globalKey 来获取该 widget 的 size

final containerWidth = globalKey.currentContext.size.width;
final containerHeight = globalKey.currentContext.size.height;
print(‘Container widht is $containerWidth, height is $containerHeight’);

修改过后的 HomePage 代码如下：

class HomePage extends StatelessWidget {

final GlobalKey globalKey = GlobalKey();

void _getWH() {
final containerWidth = globalKey.currentContext.size.width;
final containerHeight = globalKey.currentContext.size.height;
print(‘Container widht is $containerWidth, height is $containerHeight’);
}

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;
final height = size.height;
print(‘width is $width; height is $height’);
return Scaffold(
appBar: AppBar(
title: Text(‘Width & Height’),
),
body: Center(
child: Container(
key: globalKey,

文末

不管怎么样，不论是什么样的大小面试，要想不被面试官虐的不要不要的，只有刷爆面试题题做好全面的准备，当然除了这个还需要在平时把自己的基础打扎实，这样不论面试官怎么样一个知识点里往死里凿，你也能应付如流啊

小编将自己6年以来的面试经验和学习笔记都整理成了一个**937页的PDF，**以及我学习进阶过程中看过的一些优质视频教程。

其实看到身边很多朋友抱怨自己的工资很低，包括笔者也是一样的，其原因是在面试过程中没有给面试官一个很好的答案。所以笔者会持续更新面试过程中遇到的问题，也希望大家和笔者一起进步，一起学习。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
。所以笔者会持续更新面试过程中遇到的问题，也希望大家和笔者一起进步，一起学习。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！