我們平時(shí)在開(kāi)發(fā)中的過(guò)程中通常都會(huì)獲取屏幕或者 widget 的寬高用來(lái)做一些事情蕉斜，在 Flutter 中，我們可以使用如下方法來(lái)獲取屏幕或者 widget 的寬高缀棍。
MediaQuery
一般情況下宅此，我們會(huì)使用如下方式去獲取 widget 的寬高：
final size =MediaQuery.of(context).size;
final width =size.width;
final height =size.height;
復(fù)制代碼
但是如果不注意，這種寫法很容易報(bào)錯(cuò)爬范，例如下面的寫法就會(huì)報(bào)錯(cuò)：
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, ), ), ); } } 復(fù)制代碼
在代碼中父腕，我們是想獲取屏幕的寬和高，然后將屏幕寬高的一半分別賦值給 Container 的寬和高坦敌，但上述代碼并不能成功運(yùn)行侣诵，會(huì)報(bào)如下錯(cuò)誤：
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.
復(fù)制代碼
從錯(cuò)誤異常中我們可以大概了解到有兩種情況會(huì)導(dǎo)致上述異常：
- 當(dāng)沒(méi)有
WidgetsApp or MaterialApp的時(shí)候，我們使用MediaQuery.of(context)來(lái)獲取數(shù)據(jù)狱窘。 - 當(dāng)我們?cè)诋?dāng)前小部件中使用了上一個(gè)小部件的 context杜顺，來(lái)使用
MediaQuery.of(context)獲取數(shù)據(jù)的時(shí)候。
我們上述的代碼很顯然是屬于第一種情況蘸炸，也就是說(shuō)我們?cè)谑褂?MediaQuery.of(context) 的地方并沒(méi)有一個(gè) WidgetsApp or MaterialApp 來(lái)提供數(shù)據(jù)躬络。
解決方法就是將 MediaQuery.of(context) 挪到 MaterialApp 內(nèi)，如下：
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, ), ), ); } } 復(fù)制代碼
運(yùn)行效果及輸出如下：
flutter: width is 414.0; height is 896.0
復(fù)制代碼
上述代碼中搭儒，我們獲取的是 MaterialApp 的寬高穷当，也就是屏幕的寬高
還有一種是直接使用 dart:ui 包中的 window 對(duì)象（這里非常感謝 XuYanjun Android @ 蘇寧 提出的方法），這種方法使用起來(lái)也比較簡(jiǎn)單淹禾，如下：
import 'dart:ui';
final width = window.physicalSize.width;
final height = window.physicalSize.height; 復(fù)制代碼
那么如果我們要需要知道上述紅色的 Container 容器的寬高怎么辦呢馁菜？這里我們可以使用 GlobalKey
GlobalKey
使用 GlobalKey 的步驟如下：
聲明一個(gè) GlobalKey
final GlobalKey globalKey = GlobalKey();給 widget 設(shè)置 GlobalKey
key: globalKey-
通過(guò)
globalKey來(lái)獲取該 widget 的 sizefinal containerWidth = globalKey.currentContext.size.width; final containerHeight = globalKey.currentContext.size.height; print('Container widht is $containerWidth, height is $containerHeight'); 復(fù)制代碼
修改過(guò)后的 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), ), ); } } 復(fù)制代碼
上述代碼中铃岔，我們將聲明的 globalKey 設(shè)置給了 Container 汪疮， 當(dāng)我們點(diǎn)擊頁(yè)面中的 FloatingActionButton 的時(shí)候，就會(huì)使用 globalKey 來(lái)獲取 Container 的寬高毁习，也就是 _getWH() 中執(zhí)行的代碼智嚷。
運(yùn)行結(jié)果及輸出如下：
flutter: Container widht is 207.0, height is 448.0
復(fù)制代碼
