Flutter中獲取屏幕及Widget的寬高示例代碼
前言
我們平時(shí)在開發(fā)中的過程中通常都會(huì)獲取屏幕或者 widget 的寬高用來做一些事情,在 Flutter 中,我們有兩種方法來獲取 widget 的寬高。
MediaQuery
一般情況下,我們會(huì)使用如下方式去獲取 widget 的寬高:
final size =MediaQuery.of(context).size; final width =size.width; final height =size.height;
但是如果不注意,這種寫法很容易報(bào)錯(cuò),例如下面的寫法就會(huì)報(bào)錯(cuò):
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 的寬和高,但上述代碼并不能成功運(yùn)行,會(huì)報(bào)如下錯(cuò)誤:
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.
從錯(cuò)誤異常中我們可以大概了解到有兩種情況會(huì)導(dǎo)致上述異常:
- 當(dāng)沒有 WidgetsApp or MaterialApp 的時(shí)候,我們使用 MediaQuery.of(context) 來獲取數(shù)據(jù)。
- 當(dāng)我們在當(dāng)前小部件中使用了上一個(gè)小部件的 context,來使用 MediaQuery.of(context) 獲取數(shù)據(jù)的時(shí)候。
我們上述的代碼很顯然是屬于第一種情況,也就是說我們在使用 MediaQuery.of(context) 的地方并沒有一個(gè) WidgetsApp or MaterialApp 來提供數(shù)據(jù)。
解決方法就是將 MediaQuery.of(context) 挪到 MaterialApp 內(nèi),如下:
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, ), ), ); } }
運(yùn)行效果及輸出如下:
flutter: width is 414.0; height is 896.0
上述代碼中,我們獲取的是 MaterialApp 的寬高,也就是屏幕的寬高
那么如果我們要需要知道上述紅色的 Container 容器的寬高怎么辦呢?這里我們可以使用 GlobalKey
GlobalKey
使用 GlobalKey 的步驟如下:
- 聲明一個(gè) GlobalKey final GlobalKey globalKey = GlobalKey();
- 給 widget 設(shè)置 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 設(shè)置給了 Container , 當(dāng)我們點(diǎn)擊頁面中的 FloatingActionButton 的時(shí)候,就會(huì)使用 globalKey 來獲取 Container 的寬高,也就是_getWH() 中執(zhí)行的代碼。
運(yùn)行結(jié)果及輸出如下:
flutter: Container widht is 207.0, height is 448.0
如果錯(cuò)誤,還請指出,謝謝
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對腳本之家的支持。
相關(guān)文章
Android4.1中BinderService用法實(shí)例分析
這篇文章主要介紹了Android4.1中BinderService用法,以實(shí)例形式分析了Android4.1新增BinderService類的功能、原理及使用技巧,具有一定參考借鑒價(jià)值2015-10-10Android短信備份及數(shù)據(jù)插入實(shí)現(xiàn)代碼解析
這篇文章主要介紹了Android短信備份及數(shù)據(jù)插入實(shí)現(xiàn)代碼解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11Android動(dòng)態(tài)替換Application實(shí)現(xiàn)
這篇文章主要介紹了Android動(dòng)態(tài)替換Application實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Input系統(tǒng)分發(fā)策略及其應(yīng)用示例詳解
這篇文章主要為大家介紹了Input系統(tǒng)分發(fā)策略及其應(yīng)用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Android數(shù)字選擇器NumberPicker使用詳解
這篇文章主要為大家詳細(xì)介紹了Android數(shù)字選擇器NumberPicker的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08Android復(fù)選框?qū)υ捒蛴梅▽?shí)例簡析
這篇文章主要介紹了Android復(fù)選框?qū)υ捒蛴梅?結(jié)合實(shí)例形式簡單分析了Android復(fù)選對話框的創(chuàng)建與使用技巧,需要的朋友可以參考下2016-01-01