我们平时在开发中的过程中通常都会获取屏幕或者 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.
从错误异常中我们可以大概了解到有两种情况会导致上述异常:
- 当没有
WidgetsApp or MaterialApp
的时候,我们使用MediaQuery.of(context)
来获取数据。 - 当我们在当前小部件中使用了上一个小部件的 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 的步骤如下:
-
声明一个 GlobalKey
final GlobalKey globalKey = GlobalKey();
-
给 widget 设置 GlobalKey
key: globalKey
-
通过
globalKey
来获取该 widget 的 sizefinal 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 的宽高分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/19873.html