溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-18 20:54:27 來(lái)源：腳本之家 閱讀：216 作者：劉斯龍 欄目：移動(dòng)開發(fā)

前言

我們平時(shí)在開發(fā)中的過(guò)程中通常都會(huì)獲取屏幕或者 widget 的寬高用來(lái)做一些事情，在 Flutter 中，我們有兩種方法來(lái)獲取 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)沒(méi)有 WidgetsApp or MaterialApp 的時(shí)候，我們使用 MediaQuery.of(context) 來(lái)獲取數(shù)據(jù)。
  • 當(dāng)我們?cè)诋?dāng)前小部件中使用了上一個(gè)小部件的 context，來(lái)使用 MediaQuery.of(context) 獲取數(shù)據(jù)的時(shí)候。

我們上述的代碼很顯然是屬于第一種情況，也就是說(shuō)我們?cè)谑褂?MediaQuery.of(context) 的地方并沒(méi)有一個(gè) WidgetsApp or MaterialApp 來(lái)提供數(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 的寬高，也就是屏幕的寬高

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

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

GlobalKey

使用 GlobalKey 的步驟如下：

  • 聲明一個(gè) GlobalKey final GlobalKey globalKey = GlobalKey();
  • 給 widget 設(shè)置 GlobalKey key: globalKey
  • 通過(guò) globalKey 來(lái)獲取該 widget 的 size
final containerWidth = globalKey.currentContext.size.width;
final containerHeight = globalKey.currentContext.size.height;
print('Container widht is $containerWidth, height is $containerHeight');

修改過(guò)后的 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)擊頁(yè)面中的 FloatingActionButton 的時(shí)候，就會(huì)使用 globalKey 來(lái)獲取 Container 的寬高，也就是_getWH() 中執(zhí)行的代碼。

運(yùn)行結(jié)果及輸出如下：

flutter: Container widht is 207.0, height is 448.0

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

如果錯(cuò)誤，還請(qǐng)指出，謝謝

完整源碼

參考鏈接

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手