flutter全面屏,flutter界面設(shè)計(jì)
Flutter實(shí)踐--屏幕適配
做移動(dòng)端開發(fā)的小伙伴都知道，針對(duì)不同型號(hào)和尺寸的手機(jī)要進(jìn)行頁面適配，且Android和iOS適配方案各不相同，那flutter端如何進(jìn)行適配呢？以下為近期flutter開發(fā)過程中關(guān)于適配的一些學(xué)習(xí)和記錄~~~~
成都創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站制作、成都網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元靈武做網(wǎng)站,已為上家服務(wù),為靈武各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
說到flutter屏幕適配，就不得不提到插件 flutter_screenutil ，提到flutter_screenutil就不得不說以下幾點(diǎn)????
默認(rèn)寬1080px
默認(rèn)高1920px
allowFontScaling為false，即不跟隨系統(tǒng)字體大小設(shè)置變化
初始化單位為px
需要把context傳進(jìn)去，因?yàn)閮?nèi)部是通過 MediaQuery 來獲取屏幕尺寸等相關(guān)信息的
無需再傳context，因?yàn)閮?nèi)部是通過單例 window 來獲取屏幕尺寸等相關(guān)信息的
作為iOS開發(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來初始化
dart sdk 2.7正式支持 extension-method ，即為已有類擴(kuò)展方法，從 flutter_screenutil 這種 540.w 寫法點(diǎn)進(jìn)去，我們可以看到
flutter_screenutil為num類擴(kuò)展了一系列簡寫方法，那我們當(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í)現(xiàn)
調(diào)用SystemChrome.setEnabledSystemUIOverlays([]);
把狀態(tài)欄和虛擬按鍵隱藏掉，
跳轉(zhuǎn)到其他頁面后需要調(diào)用
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);把狀態(tài)欄顯示出來，
需要一起調(diào)用底部虛擬按鍵
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom])
Flutter 安卓 全面屏狀態(tài)欄和appBar 色差
導(dǎo)入這兩個(gè)庫
import 'dart:io';
import 'package:flutter/services.dart';
void main() {
runApp(MyApp());
if (Platform.isAndroid) {
SystemUiOverlayStyle systemUiOverlayStyle =
? ? SystemUiOverlayStyle(statusBarColor: Colors.transparent);
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
}
}
以上都是從別人文章里看到的.但是你設(shè)置完為啥不生效呢?
1.用hot restart 不要用hot reload
2.runApp()前面不要加return
3.如果還不管用 把應(yīng)用刪了重裝吧.
Flutter中屏幕適配，尺寸設(shè)置
1、 新版本Flutter SDK 引入了 extension的機(jī)制?？梢詫?duì)某個(gè)class 進(jìn)行擴(kuò)展。（swift中有類似機(jī)制）
2、屏幕適配一直是一個(gè)老生常談的問題，隨著機(jī)型越來越多，適配的場(chǎng)景也越來越復(fù)雜。
3、之前有了解過 微信小程序的適配方案，個(gè)人一直感覺是一個(gè)比較好的方式（ iPhone6為標(biāo)準(zhǔn)尺寸）下面????將引用小程序的方案來進(jìn)行對(duì) Flutter的尺寸設(shè)置。
size_fit.dart 文件
double_extension.dart 文件
int_extension.dart 文件
通過上面的設(shè)置，在不同設(shè)備上，展示的widget的尺寸就會(huì)不一樣了。
當(dāng)前文章：flutter全面屏,flutter界面設(shè)計(jì)
轉(zhuǎn)載來源：http://m.jiaotiyi.com/article/dscddod.html