Flutter開(kāi)發(fā)Windows 和 Linux 桌面應(yīng)用，設(shè)置默認(rèn)窗口大小

在用Flutter 開(kāi)發(fā)windows和linux跨平臺(tái)應(yīng)用的時(shí)候，如何設(shè)置默認(rèn)窗口大小呢？

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站制作、網(wǎng)站建設(shè)、武安網(wǎng)絡(luò)推廣、小程序開(kāi)發(fā)、武安網(wǎng)絡(luò)營(yíng)銷、武安企業(yè)策劃、武安品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供武安建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

flutter沒(méi)有提供統(tǒng)一的api，所以默認(rèn)的窗口大小是1280x720.

如果我們想要改成自己想要的默認(rèn)窗口大小呢？比如我想要設(shè)置為：512像素寬, 926像素高

我該怎么做呢？

請(qǐng)看我的教程。

首先你確保你已經(jīng)為項(xiàng)目創(chuàng)建了windows和Linux的支持。

目前Flutter 為windows和linux提供的是托管式運(yùn)行的主程序，可以理解為一個(gè)殼子，這個(gè)殼子就是用cpp寫(xiě)的，平臺(tái)原生的window 窗口。

所以我們可以打開(kāi)相應(yīng)的cpp源代碼，設(shè)置默認(rèn)窗口大小。

這里先講windows和linux，因?yàn)閙ac 平臺(tái)跟windows和linux不一樣，后面單獨(dú)給大家講解。

我們看圖。

源代碼路徑位于：

windows/runner/main.cpp

找到

第一個(gè)參數(shù)是寬度，單位是px，第二個(gè)是高度，單位是px

修改后重新運(yùn)行生效。

源代碼路徑位于：

linux/my_application.cc

找到

方法的第一個(gè)數(shù)字是寬度，第二個(gè)是高度，單位也是px像素。

修改后，重新運(yùn)行生效。

現(xiàn)在，你已經(jīng)學(xué)會(huì)了如何設(shè)置初始窗口大小了。

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 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實(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 滑動(dòng)、縮放控件

onInteractionEnd 交互結(jié)束

onInteractionStart 交互開(kāi)始

onInteractionUpdate 滑動(dòng)時(shí)候一直會(huì)回調(diào)

focalPoint 是相對(duì)于屏幕左上角的偏移量。

localFocalPoint是相對(duì)于父容器區(qū)域左上角的偏移量。

scale縮放量。

horizontalScale水平縮放量。

verticalScale豎直縮放量。

rotation旋轉(zhuǎn)量。------ 這里說(shuō)明能監(jiān)聽(tīng)到旋轉(zhuǎn)量

還可以通過(guò)transformationController進(jìn)行變換控制，有興趣的可以自己研究。

參考文章