Flutter支持穩(wěn)定的桌面設(shè)備開發(fā)已經(jīng)一段時間了，不得不說，F(xiàn)lutter多平臺支持的特性真的很香。我本人并沒有任何桌面開發(fā)的經(jīng)驗，但仍然使用Flutter開發(fā)出了一個桌面版小程序，功能很簡單，就是對輸入的json做格式化處理和轉(zhuǎn)模型。
創(chuàng)新新互聯(lián)，憑借十多年的成都網(wǎng)站制作、做網(wǎng)站經(jīng)驗，本著真心·誠心服務(wù)的企業(yè)理念服務(wù)于成都中小企業(yè)設(shè)計網(wǎng)站有上1000家案例。做網(wǎng)站建設(shè)，選創(chuàng)新互聯(lián)。
話不多說，先來看看實際效果。 項目源碼地址
開發(fā)環(huán)境如下：
Flutter : 2.8.1
Dart : 2.15.1
IDE : VSCode
JSON作為我們?nèi)粘ｉ_發(fā)工作中經(jīng)常要打交道的一種數(shù)據(jù)格式，它共有6種數(shù)據(jù)類型： null , num , string , object , array , bool 。我們勢必對它又愛又恨。愛他因為他作為數(shù)據(jù)處理的一種格式確實非常方便簡潔。但是在我們做Flutter開發(fā)中，又需要接觸到j(luò)son解析時，就會感覺非常棘手，因為flutter沒有反射，導(dǎo)致json轉(zhuǎn)模型這塊需要手寫那繁雜的映射關(guān)系。就像下面這樣子。
數(shù)據(jù)量少還能接受，一旦量大，那么光手寫這個解析方法都能讓你懷疑人生。更何況手寫還有出錯的可能。好在官方有個工具**json_serializable**可以自動生成這塊轉(zhuǎn)換代碼，也解決了flutter界json轉(zhuǎn)模型的空缺。當然，業(yè)界也有專門解析json的網(wǎng)站，可以自動生成dart代碼，使用者在生成后復(fù)制進項目中即可，也是非常方便的。
本項目以json解析為切入點，和大家一起來看下flutter是如何開發(fā)桌面應(yīng)用的。
要讓我們的flutter項目支持桌面設(shè)備。我們首先需要修改下flutter的設(shè)置。如下，讓我們的項目支持 windows 和 macos 系統(tǒng)。
接下來使用 flutter create 命令創(chuàng)建我們的模版工程。
創(chuàng)建完項目后，我們就可以 run 起來了。
先來看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。
我們在新建一個桌面應(yīng)用時，默認的模版又一個Appbar，此時應(yīng)用可以用鼠標拖拽移動，放大縮小，還可以縮到很小。但是，我們一旦去掉這個導(dǎo)航欄，那么窗口就不能用鼠標拖動了，并且我們往往不希望用戶將我們的窗口縮放的很小，這會導(dǎo)致頁面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過 bitsdojo_window ，我們可以實現(xiàn)窗口的定制化，拖動，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關(guān)閉的按鈕等。
通過 InkWell 組件，可以捕捉到手勢、鼠標、觸控筆的移動和停留位置
這個功能是鼠標移動后的UI交互界面。要在窗口上顯示一個提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根結(jié)點不是 Material 風(fēng)格的組件，因此會出現(xiàn)黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創(chuàng)建的 OverlayEntry 一個位置，否則它將全屏顯示。
讀取說表拖拽的文件一開始想嘗試使用 InkWell 組件，但是這個組件無法識別拖拽中的鼠標，并且也無法從中拿到文件信息。因此放棄。后來從文章《Flutter-2天寫個桌面端APP》中發(fā)現(xiàn)一個可讀取拖拽文件的組件 desktop_drop ，能滿足要求。
使用開源組件 file_picker ，選完圖片后的操作和拖拽選擇圖片后的操作一致。
Textfield 如果要顯示富文本，那么需要自定義 TextEditingController 。并重寫 buildTextSpan 方法。
在做導(dǎo)出功能時遇到下列報錯，保存提示為沒有權(quán)限訪問對應(yīng)目錄下的文件。
通過Apple的開發(fā)文檔找到有關(guān)權(quán)限問題的說明。其中有個授權(quán)私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對用戶的下載文件夾的讀/寫訪問權(quán)限 。那么，使用Xcode打開Flutter項目中的mac應(yīng)用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并將值設(shè)置為YES，保存后重啟Flutter項目。發(fā)現(xiàn)已經(jīng)可以向下載目錄中讀寫文件了。
當然，這是正常操作。還有個騷操作就是關(guān)閉系統(tǒng)的沙盒機制。將 entitlements 文件的 App Sandbox 設(shè)置為NO。這樣我們就可以訪問任意路徑了。當然關(guān)閉應(yīng)用的沙盒也就相當于關(guān)閉了應(yīng)用的防護機制，因此這個選項慎用。
原文地址：
flutter開發(fā)中，圖片的引用是必不可少的，所以為了提高效率和精準度，我們需要對不同分辨率的手機使用相對應(yīng)的切圖圖片，本章介紹如何進行 圖片分辨率適配 和 圖片批量拓展處理 。
flutter中會首先根據(jù)系統(tǒng)的devicePixelRatio（每一個邏輯像素包含多少個原始像素，可以通過MediaQueryData.devicePixelRatio來得到）來找對應(yīng)倍數(shù)的文件夾下的圖片，如果沒有對應(yīng)倍數(shù)，找最接近的。
所以在flutter項目中，我們需要構(gòu)建對應(yīng)的倍數(shù)像素文件夾
之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，會自動適配該像素下最接近的jay圖片）。
使用flutter-img-sync插件批量化處理，具體操作如下
目前還不能處理gif、webp等格式的圖片，而且如果和上邊介紹的不同像素比適配方案一起使用的話，由于進行了精準定位，所以指定圖片后就不能進行像素適配，這是目前還存在的較大問題，所以目前兩者方案只能暫時取一使用。
對于初學(xué)flutter的朋友來說，要知道，flutter的UI萬物皆Widget。
flutter所寫的頁面的結(jié)構(gòu)可以被看成套娃，一層套一層，一層套一層，一層套一層。。。。。。
Flutter Widget采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從 React 中獲得的靈感，中心思想是用widget構(gòu)建你的UI。 Widget描述了他們的視圖在給定其當前配置和狀態(tài)時應(yīng)該看起來像什么。當widget的狀態(tài)發(fā)生變化時，widget會重新構(gòu)建UI，F(xiàn)lutter會對比前后變化的不同， 以確定底層渲染樹從一個狀態(tài)轉(zhuǎn)換到下一個狀態(tài)所需的最小更改。
Text ： 該 widget 可讓創(chuàng)建一個帶格式的文本。
Row 、 Column ： 這些具有彈性空間的布局類Widget可讓您在水平（ Row ）和垂直（ Column ）方向上創(chuàng)建靈活的布局。
Stack ：取代線性布局 (和Android中的LinearLayout相似)，Stack允許子 widget 堆疊， 你可以使用 Positioned 來定位他們相對于 Stack 的上下左右四條邊的位置。
Container ： Container 可讓您創(chuàng)建矩形視覺元素。 您可以為 Container 裝飾一個 BoxDecoration , 如 background、一個邊框、或者一個陰影。 Container 也可以具有邊距（margins）、填充(padding)和應(yīng)用于其大小的約束(constraints)。另外， Container 可以使用矩陣在三維空間中對其進行變換。
具體的演示見我另外的博客
有一部分Widget都有一個 child 屬性，用于容納唯一的子Widget。
例如：Container、Center、Padding、Align等Widget。
還有一部分Widget允許存在多個子Widget，用 children 作為屬性。
例如：Row、Column、Stack等Widget。
在StatefulWidget調(diào)用createState之后，框架將新的狀態(tài)插入樹種，然后調(diào)用狀態(tài)對象的initState。子類化State可以重寫initState，以完成僅需要一次執(zhí)行的工作。當然在initState的實現(xiàn)中需要調(diào)用super.initState
當一個狀態(tài)對象不再需要時，框架調(diào)用狀態(tài)對象的dispose。也可以通過覆蓋dispose方法來執(zhí)行清理工作。
OVER~
在編寫幾個 Flutter 項目后，發(fā)現(xiàn) Flutter 的強大之處在于業(yè)務(wù)中所有用到的控件以及場景都有對應(yīng)的處理方案；而 Dart 語言也與 Java 、 Kotlin 類似，所以對 Android 開發(fā)者來說門檻非常低；特意記錄一下常用的控件及其使用：
StatelessWidget 不需要額外的創(chuàng)建 State
StatefulWidget 創(chuàng)建 State 類，并可以在其中保存一些狀態(tài)
only 可以單獨設(shè)置每個方向的內(nèi)邊距
類似于 LinearLayout 中的 orientation 設(shè)置為 vertical ， mainAxisAlignment 表示豎向的一個對齊方式， crossAxisAlignment 表示橫向的對齊方式
與 Column 相反，主軸是橫向，對齊方式類似， crossAxisAlignment 表示豎向的對齊方式
類似 SizedBox ，一個容器，但是主要功能是有一個 decoration —— 裝飾器，作用是繪制背景，或者使用 item 中的陰影
棧，先入后出，類似于 Android 上的 FrameLayout
通常配合 Stack 使用，固定顯示在某一個位置
配合多 child 使用，會填充剩余的空間
Image 功能強大，使用不同的方法可以加載不同來源的圖片
看到這些方法，突然覺得 Flutter 太香了，而且 Image 可以配置 clip 等裁剪出不同形狀的圖片，無論是圓形還是五角星都不在話下，然而 Android 要實現(xiàn)不規(guī)則的形狀，可是要下不少功夫的。
名字和 Android 的一模一樣，但是用法卻比 Android 的簡單很多：
主要就是 itemCount 與 itemBuilder ,其余就是配置樣式， itemBuilder 需要返回一個 widget ，當然了，每個 ListView 都有其對應(yīng)的 item ，在里面的方法中編寫 widget 即可
與 ListView 類似，但是需要有一個 delegate 類，作用是設(shè)置有多少列，每一列之間的間距是多少
GridView 沒有 build ， children 表示所有的子 view
最常用的控件之一，有非常多的樣式， Flutter 中通常是使用裝飾器來處理控件的，如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
最近在研究flutter如何繞過原生端直接調(diào)用c++的函數(shù)庫，在flutter2版本官方提供了比較穩(wěn)定的FFI(外部功能接口)，下面是最基本的用法：
1.創(chuàng)建一個用于flutter調(diào)用的c++文件，文件名為cout.c++，文件里面有一個count方法
2.將寫好的c++文件放在IOS/Classes文件夾下（至于為什么要放在這里，網(wǎng)上很多博客都是固定放在這個位置，至于能不能放在其他位置，以后再研究）。
3.在android目錄下創(chuàng)建CMakeLists.txt文件，把所有需要調(diào)用的c++文件通過add_library導(dǎo)入，這里導(dǎo)入剛才寫好的cout.c++。
4.在android/app目錄下的build.gradle文件里配置CMakelists。
5.經(jīng)過上面4步所需要調(diào)用的c++庫已經(jīng)導(dǎo)入進我們的flutter項目了，接下來就是在flutter端調(diào)用c++庫里面的函數(shù)。
輸出結(jié)果:
重慶分公司
重慶分公司
