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
複製代碼

若是錯誤，還請指出，謝謝

完整源碼

參考連接