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

我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情，在 Flutter 中，我们有两种方法来获取 widget 的宽高。

MediaQuery

一般情况下，我们会使用如下方式去获取 widget 的宽高：

final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height; 

但是如果不注意，这种写法很容易报错，例如下面的写法就会报错：

import 'package:flutter/material.dart';

class GetWidgetWidthAndHeiget 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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Width & Height'),
        ),
        body: Container(
          width: width / 2,
          height: height / 2,
        ),
      ),
    );
  }
}

在代码中，我们是想获取屏幕的宽和高，然后将屏幕宽高的一半分别赋值给 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 的宽高，也就是屏幕的宽高

image

那么如果我们要需要知道上述红色的 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,
          color: Colors.redAccent,
          width: width / 2,
          height: height / 2,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getWH,
        child: Icon(Icons.adjust),
      ),
    );
  }
}

上述代码中，我们将声明的 globalKey 设置给了 Container ， 当我们点击页面中的 FloatingActionButton 的时候，就会使用 globalKey 来获取 Container 的宽高，也就是
_getWH() 中执行的代码。

运行结果及输出如下：

flutter: Container widht is 207.0, height is 448.0

image

如果错误，还请指出，谢谢

完整源码

参考链接