Flutter 94: 初識(shí) MediaQuery

當(dāng)我們同時(shí)為手機(jī)和平板適配編寫(xiě) app 針對(duì)不同屏幕尺寸進(jìn)行 UI 布局或當(dāng)用戶偏好設(shè)置較大字號(hào)或是想要最大限度等減少動(dòng)畫(huà)等；此時(shí)就需要 MediaQuery 來(lái)幫我們獲取所用設(shè)備的信息以及用戶設(shè)置的偏好信息；

成都創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷策劃、小程序開(kāi)發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開(kāi)發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10余年以來(lái)，已經(jīng)為1000多家成都衛(wèi)生間隔斷各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的1000多家客戶與我們一路同行，見(jiàn)證我們的成長(zhǎng)；未來(lái)，我們一起分享成功的喜悅。

MediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中， MediaQuery 繼承自 InheritedWidget 是一個(gè)單獨(dú)的 Widget ，但一般通過(guò) MediaQuery.of(context) 來(lái)獲取相關(guān)信息；

當(dāng)相關(guān)信息發(fā)生變化，例如屏幕旋轉(zhuǎn)等時(shí)，屏幕中 Widget 會(huì)重新構(gòu)建，以保持最新?tīng)顟B(tài)；我們可以通過(guò) MediaQuery 構(gòu)造函數(shù)和提供的靜態(tài)方法手動(dòng)設(shè)置對(duì)應(yīng)的相關(guān)信息；

MediaQueryData 包含關(guān)于媒介的相關(guān)信息；一般通過(guò) MediaQuery.of(context) 獲取；

size 為媒介的尺寸大小，以邏輯像素為單位；

devicePixelRatio 為像素密度；與設(shè)備物理像素有關(guān)，與橫豎屏等無(wú)關(guān)；

orientation 為橫豎屏， Orientation.landscape 為橫屏， Orientation.portrait 為豎屏；

textScaleFactor 為

每個(gè)邏輯像素的字體像素?cái)?shù)，小菜理解為字體的像素比；注意，小菜設(shè)置了默認(rèn)字體像素密度為標(biāo)準(zhǔn)的 1.2 倍之后調(diào)整設(shè)備系統(tǒng)字號(hào)，其 1.2 倍依舊是以標(biāo)準(zhǔn)字號(hào)為基礎(chǔ)擴(kuò)大 1.2 倍；

platformBrightness 為當(dāng)前設(shè)備的亮度模式；注意調(diào)整屏幕亮度并不會(huì)改變?cè)撃Ｊ剑c當(dāng)前系統(tǒng)支持的黑暗模式和明亮模式相關(guān)；

alwaysUse24HourFormat 為當(dāng)前設(shè)備是否為 24 小時(shí)制；

accessibleNavigation 為是否使用 TalkBack 或 VoiceOver 之類的輔助功能與應(yīng)用程序進(jìn)行交互，用以輔助視力障礙人群；

invertColors 為是否使用顏色反轉(zhuǎn)，主要用于 iOS 設(shè)備；

highContrast 為用戶是否要求前景與背景之間的對(duì)比度高，主要用于 iOS 設(shè)備；

disableAnimations 為平臺(tái)是否要求禁用或減少動(dòng)畫(huà)；

boldText 為平臺(tái)是否要求使用粗體；

padding 為屏幕內(nèi)邊距，一般是劉海兒屏或異形屏中被系統(tǒng)遮擋部分邊距；

viewInsets 為鍵盤(pán)彈出時(shí)等遮擋屏幕邊距，其中 viewInsets.bottom 為鍵盤(pán)高度；

systemGestureInsets 為手勢(shì)邊距，如 Android Q 之后添加的向左滑動(dòng)關(guān)閉頁(yè)面等；

viewPadding 小菜理解為視圖內(nèi)邊距，為屏幕被劉海兒屏或異形屏中被系統(tǒng)遮擋部分，從 MediaQuery 邊界的邊緣計(jì)算；此值是保持不變；例如，屏幕底部的軟件鍵盤(pán)可能會(huì)覆蓋并占用需要底部填充的相同區(qū)域，因此不會(huì)影響此值；

physicalDepth 為設(shè)備物理層級(jí)，小菜暫時(shí)還未想到對(duì)應(yīng)的應(yīng)用場(chǎng)景；

小菜在嘗試獲取其他子 Widget Size 時(shí)，有兩點(diǎn)需要注意，首先要設(shè)置一個(gè)全局的 GlobalKey 來(lái)獲取當(dāng)前位置， key 需要為唯一的；第二通過(guò) GlobalKey().currentContext 獲取 BuildContext 上下文環(huán)境，從而獲取對(duì)應(yīng)尺寸；

MediaQuery 案例嘗試

小菜對(duì)于部分 MediaQueryData 的應(yīng)用和理解還不夠深入；如有錯(cuò)誤請(qǐng)多多指導(dǎo)！

Flutter 56: 圖解自定義 BubbleWidget 氣泡插件

小菜在學(xué)習(xí)時(shí)需要用到氣泡效果，為了更加靈活，小菜封裝了一個(gè)簡(jiǎn)單的 flutter_bubble 氣泡插件，方便日常的使用；

小菜準(zhǔn)備用 Canvas 的 drawPath 進(jìn)行繪制，主要分為三個(gè)部分，圓角弧線，普通直線，尖角折線，均可由 drawPath 自帶方法繪制；小菜以前整理過(guò)關(guān)于 Canvas 繪制的小博客，實(shí)現(xiàn)很簡(jiǎn)單；

小菜繪制了一個(gè)簡(jiǎn)陋的原型圖，整體黑框?yàn)? Bubble Widget 整體范圍；藍(lán)色圓弧為圓角位置；紅色尖角可根據(jù)上下左右參數(shù)進(jìn)行配置，且只可展示一個(gè)，尖角的高度和角度可自由配置，當(dāng)確定一個(gè)尖角位置時(shí)，其余三個(gè)方向?qū)捀哐由斓胶诳虿糠郑欢染€則是連接圓角與尖角等直線；中間空余部分為子 Widget 位置； Tips: Child Widget 寬高小于等于 Bubble Widget ；

首先在邊角處繪制四個(gè)圓弧，直接用 arcTo 即可，需要注意的是：小菜整體以 drawPath 方式實(shí)現(xiàn)，準(zhǔn)備從左上角開(kāi)始順時(shí)針繪制，所以繪制圓弧時(shí)也是順時(shí)針?lè)较颍?/p>

小菜理解， Rect 為繪制圓角的矩形，包括位置及大小； startAngele 為起始角度； sweepAngle 為繪制弧形角度；小菜需要的四個(gè)圓弧大小均為 pi/2 ，只需調(diào)整矩形位置與起始角度即可；

其次繪制尖角，小菜的尖角是由 lineTo 兩段直線拼接起來(lái)的，只需要處理起點(diǎn)與終點(diǎn)即可；小菜為了更加靈活，可以設(shè)置尖角高度與尖角角度(0 ~ 180)，通過(guò)三角函數(shù)進(jìn)行計(jì)算；

最后就是將處理好的連接起來(lái)，小菜為了適應(yīng)更多場(chǎng)景，尖角位置也可自由配置，長(zhǎng)度為到圓角的距離，默認(rèn)為邊框中間位置；

小菜將配置邏輯編輯好發(fā)布到 Pub 庫(kù)，基本 BubbleWidget 便完成，簡(jiǎn)單分析一下可配置項(xiàng)；

自定義 Bubble Widget 是小菜發(fā)布的第二款 Pub 插件，還有很多不完善的地方，如有錯(cuò)誤請(qǐng)多多指導(dǎo)！

flutter中關(guān)于軟鍵盤(pán)彈起導(dǎo)致的問(wèn)題

原因：在flutter中，鍵盤(pán)彈起時(shí)系統(tǒng)會(huì)縮小Scaffold的高度并重建

1）把Scaffold的resizeToAvoidBottomInset屬性設(shè)置為false，這樣在鍵盤(pán)彈出時(shí)將不會(huì)resize

2）把寫(xiě)死的高度改為 原高度 - MediaQuery.of(context).viewInsets.bottom ，鍵盤(pán)彈出時(shí)布局將重建，而這個(gè) MediaQuery.of(context).viewInsets.bottom 變量在鍵盤(pán)彈出前是0，鍵盤(pán)彈起后的就是鍵盤(pán)的高度

將輸入框放進(jìn)可滾動(dòng)的Widget中即可，當(dāng)輸入框獲取焦點(diǎn)后，系統(tǒng)會(huì)自動(dòng)將它滑動(dòng)到可視區(qū)域

Flutter textField隨著鍵盤(pán)彈出升高，點(diǎn)擊空白處收回鍵盤(pán)

1、Flutter中的textField要想實(shí)現(xiàn)隨著鍵盤(pán)彈出自動(dòng)升高，必須要在Scaffold中，如下所示

2、如果textfield位置比較下面或者小屏幕時(shí)，在鍵盤(pán)彈出的時(shí)候?qū)е乱绯鯾ug

這時(shí)候可以嵌套一層SingleChildScrollView（具體嵌套位置可以根據(jù)需要調(diào)整），如下所示

效果如下：

3、點(diǎn)擊空白處收起鍵盤(pán)，直接嵌套一層GestureDetector即可，嵌套位置可以在Scaffold的body層，可以自己調(diào)整。

flutter 鍵盤(pán)彈出時(shí)list view 置底

1、點(diǎn)擊輸入flutter框彈出軟鍵盤(pán)時(shí)，遮擋本輸入框一部分。

2、點(diǎn)擊輸入框，輸入框跟隨軟鍵盤(pán)自動(dòng)上移時(shí)其他不該移動(dòng)的內(nèi)容也跟隨上移導(dǎo)致的flutter鍵盤(pán)彈出時(shí)listview置底。

九、Flutter之webview

Flutter的webview常用的第三方庫(kù)有 flutter_webview_plugin 、 webview_flutter ，后者的文檔較少，暫先學(xué)習(xí)flutter_webview_plugin。

添加依賴

導(dǎo)入包

iOS端info.plist配置，其中NSAppTransportSecurity節(jié)點(diǎn)是為了支持http協(xié)議

一個(gè)簡(jiǎn)單的demo

要監(jiān)聽(tīng)鏈接跳轉(zhuǎn)的話，實(shí)現(xiàn)onUrlChanged即可

添加依賴

導(dǎo)入包

iOS端info.plist配置

一個(gè)簡(jiǎn)單的demo

但是在webview里點(diǎn)擊鏈接跳轉(zhuǎn)的時(shí)候，測(cè)試機(jī)有時(shí)會(huì)跳轉(zhuǎn)到系統(tǒng)瀏覽器上，并且點(diǎn)擊文本框無(wú)法彈出鍵盤(pán)，交互性很弱。

二者共同的缺點(diǎn)是與javascript難以交互，目前只能實(shí)現(xiàn)Flutter-JS傳遞信息，還沒(méi)找到可以進(jìn)行完美交互的第三方庫(kù)。并且一些常見(jiàn)的協(xié)議還不支持，比如撥號(hào)和調(diào)用攝像頭等，期待后續(xù)完善。

當(dāng)前文章：flutter氣泡彈出,flutter消息小紅點(diǎn)
網(wǎng)站網(wǎng)址：http://chinadenli.net/article20/dsdspco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、、外貿(mào)建站、網(wǎng)站導(dǎo)航、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)