Flutter中獲取屏幕及Widget的寬高示例代碼

2019-10-21 21:30:59

字體：大中小

來源：轉載

供稿：網友

前言

我們平時在開發中的過程中通常都會獲取屏幕或者 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 的寬高，也就是屏幕的寬高

Flutter,屏幕,Widget,寬高,代碼

那么如果我們要需要知道上述紅色的 Container 容器的寬高怎么辦呢？這里我們可以使用 GlobalKey

GlobalKey

使用 GlobalKey 的步驟如下：

聲明一個 GlobalKey final GlobalKey globalKey = GlobalKey();
給 widget 設置 GlobalKey key: globalKey
通過 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() 中執行的代碼。

運行結果及輸出如下：