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 復制代碼

 

 

如果錯誤，還請指出，謝謝

完整源碼

參考鏈接