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
複製程式碼

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

完整原始碼

參考連結