這篇文章主要給大家介紹了關於Flutter中如何獲取屏幕及Widget的寬高的相關資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者使用Flutter具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
前言
我們平時在開發中的過程中通常都會獲取屏幕或者 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 的寬高,也就是屏幕的寬高
那麼如果我們要需要知道上述紅色的 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() 中執行的代碼。
運行結果及輸出如下:
flutter: Container widht is 207.0, height is 448.0
如果錯誤,還請指出,謝謝
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對神馬文庫的支持。