快捷導(dǎo)航

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

更新時(shí)間：2019年03月10日 16:54:07 作者：劉斯龍

這篇文章主要給大家介紹了關(guān)于Flutter中如何獲取屏幕及Widget的寬高的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Flutter具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

我們平時(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)我們?cè)诋?dāng)前小部件中使用了上一個(gè)小部件的 context，來使用 MediaQuery.of(context) 獲取數(shù)據(jù)的時(shí)候。

我們上述的代碼很顯然是屬于第一種情況，也就是說我們?cè)谑褂?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é)果及輸出如下：