欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年03月10日 16:54:07   作者:劉斯龍  
這篇文章主要給大家介紹了關(guān)于Flutter中如何獲取屏幕及Widget的寬高的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(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)我們在當(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)文章

最新評論