注意：無(wú)特殊說(shuō)明，Flutter版本及Dart版本如下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

MediaQuery

通常情況下，不會(huì)直接將MediaQuery當(dāng)作一個(gè)控件，而是使用MediaQuery.of獲取當(dāng)前設(shè)備的信息，用法如下：

var data = MediaQuery.of(context);

此方式必須放在MediaQuery作用域內(nèi)，否則會(huì)拋出異常，MaterialApp和WidgetsApp都引入了MediaQuery，并且隨著屏幕的變化而導(dǎo)致重建，比如旋轉(zhuǎn)屏幕、彈出輸入框等。

MediaQueryData

MediaQueryData是MediaQuery.of獲取數(shù)據(jù)的類型。說(shuō)明如下：

屬性 說(shuō)明 size 邏輯像素，并不是物理像素，類似于Android中的dp，邏輯像素會(huì)在不同大小的手機(jī)上顯示的大小基本一樣，物理像素 = size*devicePixelRatio。 devicePixelRatio 單位邏輯像素的物理像素?cái)?shù)量，即設(shè)備像素比。 textScaleFactor 單位邏輯像素字體像素?cái)?shù)，如果設(shè)置為1.5則比指定的字體大50%。 platformBrightness 當(dāng)前設(shè)備的亮度模式，比如在Android Pie手機(jī)上進(jìn)入省電模式，所有的App將會(huì)使用深色（dark）模式繪制。 viewInsets 被系統(tǒng)遮擋的部分，通常指鍵盤，彈出鍵盤，viewInsets.bottom表示鍵盤的高度。 padding 被系統(tǒng)遮擋的部分，通常指“劉海屏”或者系統(tǒng)狀態(tài)欄。 viewPadding 被系統(tǒng)遮擋的部分，通常指“劉海屏”或者系統(tǒng)狀態(tài)欄，此值獨(dú)立于padding和viewInsets，它們的值從MediaQuery控件邊界的邊緣開始測(cè)量。在移動(dòng)設(shè)備上，通常是全屏。 systemGestureInsets 顯示屏邊緣上系統(tǒng)“消耗”的區(qū)域輸入事件，并阻止將這些事件傳遞給應(yīng)用。比如在Android Q手勢(shì)滑動(dòng)用于頁(yè)面導(dǎo)航（ios也一樣），比如左滑退出當(dāng)前頁(yè)面。 physicalDepth 設(shè)備的最大深度，類似于三維空間的Z軸。 alwaysUse24HourFormat 是否是24小時(shí)制。 accessibleNavigation 用戶是否使用諸如TalkBack或VoiceOver之類的輔助功能與應(yīng)用程序進(jìn)行交互，用于幫助視力有障礙的人進(jìn)行使用。 invertColors 是否支持顏色反轉(zhuǎn)。 highContrast 用戶是否要求前景與背景之間的對(duì)比度高， iOS上，方法是通過(guò)“設(shè)置”->“輔助功能”->“增加對(duì)比度”。 此標(biāo)志僅在運(yùn)行iOS 13的iOS設(shè)備上更新或以上。 disableAnimations 平臺(tái)是否要求盡可能禁用或減少動(dòng)畫。 boldText 平臺(tái)是否要求使用粗體。 orientation 是橫屏還是豎屏。

padding、viewPadding和viewInsets的區(qū)別如下：

使用場(chǎng)景

根據(jù)尺寸構(gòu)建不同的布局

SafeArea控件就是通過(guò)MediaQuery.of來(lái)實(shí)現(xiàn)的，平板和手機(jī)的（或者橫屏和豎屏）布局可能是不一樣的，比如如下布局：

布局代碼如下：

var screenSize = MediaQuery.of(context).size; if(screenSize.width>oneColumnLayout){//平板布局 }else{//手機(jī)布局 }

oneColumnLayout表示一列布局的寬度。

系統(tǒng)字體變化

很多App都有一個(gè)功能就是調(diào)節(jié)字體大小，通過(guò)MediaQuery來(lái)實(shí)現(xiàn)，實(shí)現(xiàn)如下：

@overrideWidget build(BuildContext context) {var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0);return Scaffold(appBar: AppBar(title: Text('老孟'),),body: MediaQuery(data: _data,child: Text('字體變大'),),);}

字體變大了一倍。

交流

如果你對(duì)Flutter還有疑問(wèn)或者技術(shù)方面的疑惑，歡迎加入Flutter交流群（微信：laomengit）。

同時(shí)也歡迎關(guān)注我的Flutter公眾號(hào)【老孟程序員】，公眾號(hào)首發(fā)Flutter的相關(guān)內(nèi)容。

推薦一個(gè)Flutter學(xué)習(xí)地址：http://laomengit.com 里面包含150多個(gè)組件的詳細(xì)用法。

總結(jié)

以上是生活随笔為你收集整理的aliplayer 手机全屏控件不显示_Flutter 强大的MediaQuery控件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。