建站
咨詢
售后
建站咨詢
新聞中心
Flutter MediaQuery獲取屏幕信息以及屏幕適配
Flutter中控件的高寬和字體大小時(shí)，使用的是邏輯像素，并非是實(shí)際的物理像素。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),石河子企業(yè)網(wǎng)站建設(shè),石河子品牌網(wǎng)站建設(shè),網(wǎng)站定制,石河子網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,石河子網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
flutter中的屏幕適配
假設(shè)設(shè)計(jì)圖的大小為1080 1920，上面一個(gè)圖片的高度為 80 90，則它在設(shè)備上的高寬為
對(duì)于android手機(jī)，一般以寬度為基準(zhǔn)計(jì)算UI的高寬，因?yàn)閍ndroid手機(jī)的寬度一般就是750，1080等幾個(gè)尺寸，但是高的尺寸就有很多。
推薦一個(gè)別人封裝好的一個(gè)用于屏幕適配的庫(kù)
Flutter屏幕適配方案插件-完美解決屏幕適配
在Flutter中如何修改屏幕的方向
首先，你需要導(dǎo)入 services 包 ：
我們可以通過(guò) SystemChrome 這個(gè)類的 setPreferredOrientations方法來(lái)設(shè)置屏幕方向。
setPreferredOrientations（）方法，參數(shù)是一個(gè)數(shù)組 ，我們可以設(shè)置多個(gè)方向（定義在 DeviceOrientation 枚舉類中）。
在Flutter中主函數(shù)入口是 main()方法，如果我們想設(shè)置整個(gè)應(yīng)用的屏幕方向，在runApp()方法之前設(shè)置即可。
注意 ： 設(shè)置屏幕方法調(diào)用之前，需要調(diào)用一下 binding 的初始化方法（先記住即可）
landscapeLeft or landscapeRight 可以設(shè)置一個(gè)或者兩個(gè)，效果試一下就知道了
設(shè)置屏幕垂直方向 ：
動(dòng)態(tài)改變屏幕方向 ：
獲取當(dāng)前屏幕方向 ：
參考 ：
（自備梯子）
如果覺(jué)得文章有用，幫忙點(diǎn)個(gè)喜歡?? ，???????????? 贈(zèng)人玫瑰，手留余香
Flutter實(shí)踐--屏幕適配
做移動(dòng)端開(kāi)發(fā)的小伙伴都知道，針對(duì)不同型號(hào)和尺寸的手機(jī)要進(jìn)行頁(yè)面適配，且Android和iOS適配方案各不相同，那flutter端如何進(jìn)行適配呢？以下為近期flutter開(kāi)發(fā)過(guò)程中關(guān)于適配的一些學(xué)習(xí)和記錄~~~~
說(shuō)到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說(shuō)以下幾點(diǎn)????
默認(rèn)寬1080px
默認(rèn)高1920px
allowFontScaling為false，即不跟隨系統(tǒng)字體大小設(shè)置變化
初始化單位為px
需要把context傳進(jìn)去，因?yàn)閮?nèi)部是通過(guò) MediaQuery 來(lái)獲取屏幕尺寸等相關(guān)信息的
無(wú)需再傳context，因?yàn)閮?nèi)部是通過(guò)單例 window 來(lái)獲取屏幕尺寸等相關(guān)信息的
作為iOS開(kāi)發(fā)，之前都是以pt為參照進(jìn)行比例適配的，且架構(gòu)組已經(jīng)定義了一套適配相關(guān)常量，傳px進(jìn)去不太方便，所以需要對(duì)flutter_screenutil進(jìn)行擴(kuò)展
公司設(shè)計(jì)圖是以iPhone X的尺寸提供的即物理設(shè)備尺寸為375x812，像素比例為750x1624,像素密度比為2
初始化仍用px來(lái)初始化
dart sdk 2.7正式支持 extension-method ，即為已有類擴(kuò)展方法，從 flutter_screenutil 這種 540.w 寫(xiě)法點(diǎn)進(jìn)去，我們可以看到
flutter_screenutil為num類擴(kuò)展了一系列簡(jiǎn)寫(xiě)方法，那我們當(dāng)然可以按照它這種方式進(jìn)行擴(kuò)展
網(wǎng)上提供的解決方案：
第一步：修改 pubspec.yaml
第二步：執(zhí)行 flutter pub get
第三步：重啟 AndroidStudio
解決方案：去掉const即可
UI設(shè)計(jì)中px、pt、ppi、dpi、dp、sp之間的關(guān)系
Dart/Flutter - 擴(kuò)展方法(ExtensionMethod)
Flutter中屏幕適配，尺寸設(shè)置
1、 新版本Flutter SDK 引入了 extension的機(jī)制?？梢詫?duì)某個(gè)class 進(jìn)行擴(kuò)展。（swift中有類似機(jī)制）
2、屏幕適配一直是一個(gè)老生常談的問(wèn)題，隨著機(jī)型越來(lái)越多，適配的場(chǎng)景也越來(lái)越復(fù)雜。
3、之前有了解過(guò) 微信小程序的適配方案，個(gè)人一直感覺(jué)是一個(gè)比較好的方式（ iPhone6為標(biāo)準(zhǔn)尺寸）下面????將引用小程序的方案來(lái)進(jìn)行對(duì) Flutter的尺寸設(shè)置。
size_fit.dart 文件
double_extension.dart 文件
int_extension.dart 文件
通過(guò)上面的設(shè)置，在不同設(shè)備上，展示的widget的尺寸就會(huì)不一樣了。
新聞名稱：flutter屏幕配置,flutter 投屏功能
分享路徑：http://fisionsoft.com.cn/article/dsegoeg.html
