Flutter开发：获取屏幕和widget宽高的两种方法

在开发过程中，我们通常会获取屏幕或widget的宽高来做一些事情。在 Flutter 中，我们有两种方法来获取 widget 的宽度和高度。 。 ？代码中我们想要获取屏幕的宽度和高度，然后将屏幕宽度和高度的一半赋值给Container的宽度和高度，但是上面的代码无法成功执行，下面的代码会报错：

flutter: The following assertion was thrown building GetWidgetWidthAndHeiget(dirty):
flutter: () 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 ().
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 或 MaterialApp，我们使用 （上下文） 检索数据。
2. 当我们在当前widget中使用前一个widget的上下文时，使用(context)来检索数据。

我们上面的代码显然属于第一种情况，这意味着我们使用（上下文）的地方，没有WidgetsApp或MaterialApp提供数据。

解决办法就是将（上下文）移动到MaterialApp，如下：

import 'package:flutter/';

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

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final size = (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。宽度和高度，即屏幕的宽度和高度

图像

那么如果我们需要知道上面红框容器的宽度和高度呢？这里我们可以按照globalKey

1. globalKey

   的步骤来使用globalkey：

   1. 指定一个globalKey Final GlobalKey GlobalKey = Globalkey (); Balkeyk 通过 globalKey

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

   获取 widget 的大小修改后的 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 = (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(),
         ),
       );
     }
   }
   

   在上面的代码中我们声明了 globalKey 设置 给定Container，当我们点击页面上的FloatingActionButton时，我们使用globalKey来设置Container的宽度和高度，即 代码在_getWH()中执行。

   运行结果及输出如下：

   flutter: Container widht is 207.0, height is 448.0