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

Flutter 中获取屏幕以及 Widget 的宽高我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高。 当没有 WidgetsApp or MaterialApp 的时候,我们使用 MediaQuery.of(con…

我们平时在开发中的过程中通常都会获取屏幕或者 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 的宽高,也就是屏幕的宽高

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

还有一种是直接使用 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

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

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

完整源码

参考链接

今天的文章Flutter 中获取屏幕以及 Widget 的宽高分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/19873.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注