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 的宽高，也就是屏幕的宽高

还有一种是直接使用 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,
          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
复制代码

若是错误，还请指出，谢谢

完整源码

参考连接