Flutter -- JSON解析

由于 Flutter 不支持運(yùn)行時(shí)反射，JSON 解析完全是手動(dòng)的。

創(chuàng)新互聯(lián)是專業(yè)的山城網(wǎng)站建設(shè)公司，山城接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行山城網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

所謂手動(dòng)解析，是指使用 dart:convert 庫中內(nèi)置的 JSON 解碼器，將 JSON 字符串解析成自定義對象的過程。使用這種方式，我們需要先將 JSON 字符串傳遞給 JSON.decode 方法解析成一個(gè) Map，然后把這個(gè) Map 傳給自定義的類，進(jìn)行相關(guān)屬性的賦值。

下面動(dòng)手解析一個(gè)用戶的信息

首先，我們根據(jù) JSON 結(jié)構(gòu)定義 User類，并創(chuàng)建一個(gè)工廠類，來處理 User 類屬性成員與 JSON 字典對象的值之間的映射關(guān)系：

數(shù)據(jù)解析類創(chuàng)建好了，剩下的事情就相對簡單了，我們只需要把 JSON 文本通過 JSON.decode 方法轉(zhuǎn)換成 Map，然后把它交給 User 的工廠類 fromJson 方法，即可完成 User 對象的解析：

項(xiàng)目中往往會(huì)碰到 嵌套對象屬性 情況，

面對這種情況，我們需要為每一個(gè)非基本類型屬性創(chuàng)建一個(gè)解析類。

然后，我們只需要在 User 類中，增加 dog 屬性及對應(yīng)的 JSON 映射規(guī)則即可：

通過這種方法，無論對象有多復(fù)雜的非基本類型屬性，我們都可以創(chuàng)建對應(yīng)的解析類進(jìn)行處理。

不過到現(xiàn)在為止，我們的 JSON 數(shù)據(jù)解析還是在主 Isolate 中完成。如果 JSON 的數(shù)據(jù)格式比較復(fù)雜，數(shù)據(jù)量又大，這種解析方式可能會(huì)造成短期 UI 無法響應(yīng)。下面我們可以用 compute 函數(shù)優(yōu)化一下

通過 compute 的改造，我們就不用擔(dān)心 JSON 解析時(shí)間過長阻塞 UI 響應(yīng)了。

【Dart/Flutter】一些常用的基本數(shù)據(jù)格式轉(zhuǎn)換

十六進(jìn)制

有時(shí)，從16進(jìn)制轉(zhuǎn)換為字符串后，因?yàn)?6進(jìn)制數(shù)據(jù)源的原因，前后可能會(huì)有空格以及一些奇怪的字符

此時(shí)需要去掉，可以通過以下這個(gè)方法（參考源：JDK中String的trim方法實(shí)現(xiàn)）

十進(jìn)制

乘方/次方/次冪

UInt8List轉(zhuǎn)十六進(jìn)制，具體細(xì)則看注釋

flutter檢測當(dāng)前剩余的時(shí)間

我想你想要的是：target.difference(DateTime.now()).toString().split('.')[0])

使用.split('.')[0]持續(xù)時(shí)間來去掉秒的分?jǐn)?shù)。

其中target是DateTime對象。flutter計(jì)算給定小時(shí)的剩余時(shí)間,以秒為單位更新flutter，因此,時(shí)間以h:m:s為單位,例如,如果給定的時(shí)間是(6:27pm),我希望得到此結(jié)果（剩余時(shí)間02:21:02）。

打印結(jié)果:Text('Timeuntil${DateFormat.Hms().format(target)}');Text(target.difference(DateTime.now()).toString().split('.')[0])

Flutter真香，我用它寫了個(gè)桌面版JSON解析工具

Flutter支持穩(wěn)定的桌面設(shè)備開發(fā)已經(jīng)一段時(shí)間了，不得不說，F(xiàn)lutter多平臺支持的特性真的很香。我本人并沒有任何桌面開發(fā)的經(jīng)驗(yàn)，但仍然使用Flutter開發(fā)出了一個(gè)桌面版小程序，功能很簡單，就是對輸入的json做格式化處理和轉(zhuǎn)模型。

話不多說，先來看看實(shí)際效果。 項(xiàng)目源碼地址

開發(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 。我們勢必對它又愛又恨。愛他因?yàn)樗鳛閿?shù)據(jù)處理的一種格式確實(shí)非常方便簡潔。但是在我們做Flutter開發(fā)中，又需要接觸到j(luò)son解析時(shí)，就會(huì)感覺非常棘手，因?yàn)閒lutter沒有反射，導(dǎo)致json轉(zhuǎn)模型這塊需要手寫那繁雜的映射關(guān)系。就像下面這樣子。

數(shù)據(jù)量少還能接受，一旦量大，那么光手寫這個(gè)解析方法都能讓你懷疑人生。更何況手寫還有出錯(cuò)的可能。好在官方有個(gè)工具**json_serializable**可以自動(dòng)生成這塊轉(zhuǎn)換代碼，也解決了flutter界json轉(zhuǎn)模型的空缺。當(dāng)然，業(yè)界也有專門解析json的網(wǎng)站，可以自動(dòng)生成dart代碼，使用者在生成后復(fù)制進(jìn)項(xiàng)目中即可，也是非常方便的。

本項(xiàng)目以json解析為切入點(diǎn)，和大家一起來看下flutter是如何開發(fā)桌面應(yīng)用的。

要讓我們的flutter項(xiàng)目支持桌面設(shè)備。我們首先需要修改下flutter的設(shè)置。如下，讓我們的項(xiàng)目支持 windows 和 macos 系統(tǒng)。

接下來使用 flutter create 命令創(chuàng)建我們的模版工程。

創(chuàng)建完項(xiàng)目后，我們就可以 run 起來了。

先來看下整體界面，界面四塊，分別為功能模塊、文件選擇模塊、輸入模塊、輸出模塊。

我們在新建一個(gè)桌面應(yīng)用時(shí)，默認(rèn)的模版又一個(gè)Appbar，此時(shí)應(yīng)用可以用鼠標(biāo)拖拽移動(dòng)，放大縮小，還可以縮到很小。但是，我們一旦去掉這個(gè)導(dǎo)航欄，那么窗口就不能用鼠標(biāo)拖動(dòng)了，并且我們往往不希望用戶將我們的窗口縮放的很小，這會(huì)導(dǎo)致頁面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過 bitsdojo_window ，我們可以實(shí)現(xiàn)窗口的定制化，拖動(dòng)，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關(guān)閉的按鈕等。

通過 InkWell 組件，可以捕捉到手勢、鼠標(biāo)、觸控筆的移動(dòng)和停留位置

這個(gè)功能是鼠標(biāo)移動(dòng)后的UI交互界面。要在窗口上顯示一個(gè)提示框，可以使用 Overlay 。需要注意的是，由于在 Overlay 上的 text 的根結(jié)點(diǎn)不是 Material 風(fēng)格的組件，因此會(huì)出現(xiàn)黃色的下劃線。因此一定要用 Material 包一下 text 。并且你必須給創(chuàng)建的 OverlayEntry 一個(gè)位置，否則它將全屏顯示。

讀取說表拖拽的文件一開始想嘗試使用 InkWell 組件，但是這個(gè)組件無法識別拖拽中的鼠標(biāo)，并且也無法從中拿到文件信息。因此放棄。后來從文章《Flutter-2天寫個(gè)桌面端APP》中發(fā)現(xiàn)一個(gè)可讀取拖拽文件的組件 desktop_drop ，能滿足要求。

使用開源組件 file_picker ，選完圖片后的操作和拖拽選擇圖片后的操作一致。

Textfield 如果要顯示富文本，那么需要自定義 TextEditingController 。并重寫 buildTextSpan 方法。

在做導(dǎo)出功能時(shí)遇到下列報(bào)錯(cuò)，保存提示為沒有權(quán)限訪問對應(yīng)目錄下的文件。

通過Apple的開發(fā)文檔找到有關(guān)權(quán)限問題的說明。其中有個(gè)授權(quán)私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對用戶的下載文件夾的讀/寫訪問權(quán)限 。那么，使用Xcode打開Flutter項(xiàng)目中的mac應(yīng)用，修改工程目錄下的 DebugProfile.entitlements 文件，向 entitlements 文件中添加 com.apple.security.files.downloads.read-write ，并將值設(shè)置為YES，保存后重啟Flutter項(xiàng)目。發(fā)現(xiàn)已經(jīng)可以向下載目錄中讀寫文件了。

當(dāng)然，這是正常操作。還有個(gè)騷操作就是關(guān)閉系統(tǒng)的沙盒機(jī)制。將 entitlements 文件的 App Sandbox 設(shè)置為NO。這樣我們就可以訪問任意路徑了。當(dāng)然關(guān)閉應(yīng)用的沙盒也就相當(dāng)于關(guān)閉了應(yīng)用的防護(hù)機(jī)制，因此這個(gè)選項(xiàng)慎用。

原文地址：