話不多說，我們來看看實際效果。項目源代碼地址
開發環境如下:
顫動:2.8.1
鏢:2.15.1
IDE : VSCode
JSON作為我們日常開發工作中經常要處理的數據格式，有六種數據類型:null、num、string、object、array、bool。我們必然會對它又愛又恨。愛他是因為他作為壹種數據處理的格式真的方便簡潔。但是當我們在flutter開發中需要接觸json解析的時候，會覺得很棘手，因為Flutter沒有反射，導致json需要手寫來建模的映射關系很復雜。像這樣。
少量數據是可以接受的。壹旦量大了，光是筆跡的分析方法就能讓妳懷疑人生。更何況還有筆跡出錯的可能。好在官方工具**json_serializable**可以自動生成這個轉換代碼，這也解決了json轉換模型在flutter中的空缺。當然也有專門解析json的網站，可以自動生成dart代碼，用戶生成後可以復制到項目中，也很方便。
這個項目以json解析為出發點，我們來看看flutter是如何開發桌面應用的。
讓我們的flutter項目支持桌面設備。我們需要首先修改flutter的設置。如下，讓我們的項目支持windows和macos系統。
接下來，使用flutter create命令來創建我們的模板項目。
創建項目後，我們可以運行它。
先看整體界面。共有四個界面，即功能模塊、文件選擇模塊、輸入模塊和輸出模塊。
當我們創建壹個新的桌面應用程序時，默認的模板是壹個Appbar。這時可以用鼠標拖拽移動應用，放大縮小，甚至可以縮小到很小的尺寸。但是，壹旦我們去掉了這個導航欄，窗口就不能用鼠標拖動了，我們往往不希望用戶把我們的窗口縮放得很小，這樣會導致頁面異常，壹些重要信息顯示不完整。因此，我們需要在這裏使用第三方組件bitsdojo_window。通過bitsdojo_window，我們可以自定義窗口，拖動，最小尺寸，最大尺寸，窗口邊框，以及窗口頂部的按鈕來放大，縮小，關閉。
通過InkWell組件，可以捕捉手勢、鼠標和手寫筆的移動和停留位置。
這個功能就是鼠標移動後的UI交互界面。要在窗口上顯示提示框，可以使用Overlay。需要註意的是，因為疊加文本的根節點不是材質樣式的組件，所以會出現黃色下劃線。所以壹定要用材料把文字包裹起來。並且妳必須給創建的重疊條目壹個位置，否則它將全屏顯示。
壹開始我嘗試用InkWell組件讀取拖動的文件，但是這個組件無法識別拖動的鼠標，無法從中獲取文件信息。所以放棄吧。後來從《Flutter-2天寫壹個桌面APP》這篇文章中，我找到了壹個可以讀取和拖動文件的組件desktop_drop，可以滿足要求。
使用開源組件file_picker，選中壹張圖片後的操作和拖拽選中壹張圖片後的操作是壹樣的。
如果要顯示富文本，Textfield需要自定義TextEditingController。並重寫buildTextSpan方法。
在做導出功能時，遇到以下錯誤，提示我沒有權限訪問相應目錄下的文件。
通過蘋果的開發文檔找到權限問題的描述。其中，授權私鑰的密鑰是com。apple . security . files . downloads . read-write，表示對用戶下載文件夾的讀/寫訪問權限。然後，使用Xcode打開Flutter項目中的mac應用程序，修改項目目錄中的DebugProfile.entitlements文件，添加com。apple . security . files . downloads . read-write到授權文件，設置值為YES，保存後重啟Flutter項目。發現妳可以讀寫文件到下載目錄。
當然，這是正常操作。另壹個Sao操作是關閉系統的沙盒機制。將授權文件的應用程序沙箱設置為no .以便我們可以訪問任何路徑。當然，關閉應用的沙盒就相當於關閉了應用的保護機制，所以這個選項要慎用。
原地址:/post/7069689952459554830