看我如何使用Flutter開發(fā)一款盯盤小工具

前言

成都創(chuàng)新互聯(lián)-云計(jì)算及IDC服務(wù)提供商，涵蓋公有云、IDC機(jī)房租用、中國電信成都樞紐中心、等保安全、私有云建設(shè)等企業(yè)級互聯(lián)網(wǎng)基礎(chǔ)服務(wù)，歡迎咨詢：18982081108

最近街邊討論買基金大佬們又多起來了，一些技術(shù)交流群也時(shí)不時(shí)看到某某某大佬在討論股票，看來最近行情很好啊，雖然我不懂交易，但我總覺得可以做些什么來彌補(bǔ)我的不足，于是有了接下來要跟大家分享的“盯盤小工具”。

準(zhǔn)備開干

那么接下來我的目標(biāo)是開發(fā)一款PC端的桌面盯盤小工具，特點(diǎn)首先就是小、方便整天盯著電腦屏幕的白領(lǐng)們打開瞧瞧，省去費(fèi)事各種操作；然后就是無需關(guān)注太多費(fèi)腦筋的指標(biāo)，所以能夠顯示名稱和漲跌幅即可。有的上面的需求后，那就可以開始搬磚了，但是對于我這種只懂點(diǎn)Android皮毛又沒做過桌面應(yīng)用的人來說，簡直是比登天還難，那該咋辦？在夜深人靜時(shí)，我恍然想起了Flutter，沒錯(cuò)先來一張圖：

還記得當(dāng)時(shí)看Flutter的時(shí)候還是1.2版本，如今回過頭來看，已經(jīng)不是曾經(jīng)那個(gè)Flutter了。

搬磚

為了實(shí)現(xiàn)這個(gè)小小的業(yè)余需求并且又能學(xué)習(xí)Flutter，于是我白天下班回來又開始不同場景不同程序語言的搬磚，重新安裝了Flutter的最新開發(fā)環(huán)境，重新學(xué)習(xí)Flutter開發(fā)-萬物皆widget。

功夫不負(fù)有心人

效果圖展示

當(dāng)前為最初版本，很多功能還不夠完善，后續(xù)目標(biāo)就是完善及優(yōu)化，

GitHub項(xiàng)目地址：

致謝

為了實(shí)現(xiàn)這個(gè)小小的業(yè)余需求并且又能學(xué)習(xí)Flutter，我也參考了很多Flutter大佬的開源項(xiàng)目，在此感謝所有優(yōu)秀的開源項(xiàng)目 _ 。

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

Flutter支持穩(wěn)定的桌面設(shè)備開發(fā)已經(jīng)一段時(shí)間了，不得不說，F(xiàn)lutter多平臺(tái)支持的特性真的很香。我本人并沒有任何桌面開發(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)慎用。

原文地址：

Flutter跨平臺(tái)框架（Dart語言）

Flutter是谷歌的移動(dòng)UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用，并且Flutter是完全免費(fèi)、開源的。(-中文網(wǎng)；-英文網(wǎng))

Flutter是一種趨勢，勢必會(huì)取代RN，成為最主流的跨平臺(tái)開發(fā)框架，基于Dart語言。ios開發(fā)必須Mac電腦。android開發(fā)window、linux、Mac均可。

flutter為什么不推薦getx

使用這個(gè)版本的GetX寫了Demo之后，發(fā)現(xiàn)有幾個(gè)問題：

感覺不太像是穩(wěn)定版本，存在一些比較明顯的問題；而且2.0.6到2.0.7只是一個(gè)小版本，全局狀態(tài)管理邏輯似乎就有比較大的改動(dòng)。

不支持響應(yīng)式編程，這個(gè)版本的狀態(tài)管理還是基于state的邏輯；因?yàn)橄胍容^高效的解耦頁面和邏輯，可能需要搭配響應(yīng)式編程框架。

相關(guān)功能可能比較少，沒有最新版本的功能那么全面。

Flutter是Google開源的構(gòu)建用戶界面（UI）工具包，幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺(tái)精美應(yīng)用，支持移動(dòng)、Web、桌面和嵌入式平臺(tái)。

Flutter 開源、免費(fèi)，擁有寬松的開源協(xié)議，適合商業(yè)項(xiàng)目。Flutter已推出穩(wěn)定的2.0版本。

產(chǎn)生背景：

Flutter可以方便的加入現(xiàn)有的工程中。在全世界，F(xiàn)lutter 正在被越來越多的開發(fā)者和組織使用，并且 Flutter是完全免費(fèi)、開源的。它也是構(gòu)建未來的 Google Fuchsia 應(yīng)用的主要方式。

Flutter組件采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從React中獲得的靈感，中心思想是用組件(widget)構(gòu)建你的UI。

組件描述了在給定其當(dāng)前配置和狀態(tài)時(shí)他們顯示的樣子。當(dāng)組件狀態(tài)改變，組件會(huì)重構(gòu)它的描述(description)，F(xiàn)lutter 會(huì)對比之前的描述， 以確定底層渲染樹從當(dāng)前狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需要的最小更改。

Flutter開源app---開眼短視頻

在玩安卓上有款組件化開源app的項(xiàng)目，一款模仿 Eyepetizer | 開眼視頻的 開源app,這款app設(shè)計(jì)風(fēng)格特別喜歡的，比較簡潔，美觀，然后最近又在學(xué)flutter的知識，于是就寫了一款flutter版本的開源短視頻，效果也是聽不錯(cuò)的，廢話不多說，先上效果圖。

先附上項(xiàng)目地址：

項(xiàng)目api會(huì)在后面的參考鏈接里，或者直接項(xiàng)目內(nèi)查看。

項(xiàng)目地址：

更新：6/30 項(xiàng)目新增下拉刷新，上拉加載功能

kotlin版本開眼短視頻開發(fā)中，敬請期待...

總結(jié)：在此感謝參考的伙伴的文章，寫的也很好，然后我將這個(gè)項(xiàng)目改寫成了flutter，當(dāng)中也學(xué)習(xí)到了很多flutter相關(guān)的知識，后續(xù)還有繼續(xù)鞏固，不斷學(xué)習(xí)。

參考鏈接（包含本項(xiàng)目的api）

開源精粹（二）！22個(gè)實(shí)用、有趣的開源項(xiàng)目

作為一名開源愛好者，發(fā)掘優(yōu)秀的開源項(xiàng)目是一件非常有趣的事情。在第一期中，我分享了單頁個(gè)人網(wǎng)站模板、組裝式 Flutter 應(yīng)用框架、PHP 客戶端庫、Java 診斷工具等一些實(shí)用的庫和工具。本期依舊會(huì)為大家分享一些前端、后端、移動(dòng)開發(fā)的相關(guān)工具，希望你能“淘”到適合自己的工具。

1.Vue-EasyTable

Vue-EasyTable 是一款基于 Vue2.x 的 table 組件，具備自適應(yīng)、表頭與列固定、自定義單元格樣式、自定義 Loading 等功能。

2.React-Calendar

這是一款具備原生日期格式的日歷組件。它不依賴 Moment.js，支持日期選擇范圍，涵蓋了各國語言，開箱即用。

3.Matter

CSS 實(shí)現(xiàn)的 Material 組件合集項(xiàng)目，作者已將部分作品開源，效果可以在 CodePen 上查看。

4.Revery

Revery 是一款用于構(gòu)建高性能、跨平臺(tái)桌面應(yīng)用的框架。它類似于加速版的原生 Electron，除了擁有類似 React / Redux 的庫，還具備 GPU 加速渲染功能，其內(nèi)置的編譯器速度也相當(dāng)快。

5.Web Accessibility Guide

這是一個(gè)精選了 Web 可訪問性貼士、技巧和最佳實(shí)踐的開源項(xiàng)目，你將會(huì)學(xué)習(xí)到一些改善 Web 可訪問性的實(shí)用做法。

1.SOFAJRaft

SOFAJRaft 是螞蟻金服開源的生產(chǎn)級 Java Raft 算法庫，它基于 Raft 一致性算法的生產(chǎn)級高性能 Java 實(shí)現(xiàn)，支持 MULTI-RAFT-GROUP，適用于高負(fù)載低延遲的場景，易于使用。

2. Dragonwell

阿里開源了 OpenJDK 發(fā)行版 Dragonwell，它提供長期支持，包括性能增強(qiáng)和安全修復(fù)。在數(shù)據(jù)中心大規(guī)模 Java 應(yīng)用部署情況下，可以大幅度提高穩(wěn)定性、效率以及性能。

3.Lawoole

Lawoole 是一款基于 Laravel 和 Swoole 的高性能 PHP 框架。它兼具了 Laravel 的特點(diǎn)，還解決了其功能背后的性能問題。同時(shí)，你還能感受到與 Laravel 一樣的編碼體驗(yàn)。

4.AntNest

AntNest 是一個(gè)簡潔、快速的異步爬蟲框架。它僅有 600 行代碼，基于 Python 3.6+.

5.PHP-Awesome

這個(gè)倉庫匯集了 PHP 優(yōu)秀的資源，供你查詢和參考。

1.FlutterBoost

FlutterBoost 是閑魚開源的新一代 Flutter-Native 混合解決方案。它能夠幫你處理頁面的映射和跳轉(zhuǎn)，你只需要關(guān)心頁面的名字和參數(shù)即可。

2.MyLayout

MyLayout 是一套 iOS 界面視圖布局框架，可謂 iOS 下的界面布局利器。它集成了 iOS Autolayout、Size Classes、Android 的 5 大布局體系、HTML/CSS 的浮動(dòng)定位技術(shù)以及 Flex-Box 和 Bootstrap 框架等主流的平臺(tái)的界面布局功能，并提供了一套簡單、完備的多屏幕尺寸適配的解決方案。

3.SegementSlide

SegementSlide 是一個(gè) iOS UI 庫，它具備完整的滑滾及切換組件，旨在解決多層 UIScrollView 嵌套滾動(dòng)的問題。

1.DevHub

DevHub 是一款跨平臺(tái)的 GitHub 通知管理客戶端，支持 Android、 iOS、網(wǎng)頁和桌面上使用，幫助你便捷的接收 GitHub 各類通知。

2.Reqman

Reqman 是一個(gè)幫助后端工程師進(jìn)行 API 測試的工具，同時(shí)也是一個(gè)基于 Node.js 的爬蟲工具。

3.FreeCodeCamp

說到 FreeCodeCamp，或許大家不會(huì)陌生，而這個(gè)項(xiàng)目就是他們建立的開源課程和相應(yīng)的代碼庫。網(wǎng)站提供了 6 大認(rèn)證課程，也涉及了全棧開發(fā)認(rèn)證。如果你感興趣，不妨了解下。

4.Gitter

Gitter 是 GitHub 小程序客戶端，作者采用 Taro 框架 + Taro UI 進(jìn)行開發(fā)，而小程序內(nèi)數(shù)據(jù)則來自 GitHub Api V3.

5.Awesome Podcasts

這個(gè)項(xiàng)目收集了各類實(shí)用的播客，涵蓋了主流的編程語言，希望對你提升技術(shù)水平有所幫助。

6.編程圖書大全

書籍不光能在你迷茫的時(shí)候，給予你答案，還能在你提升技能的時(shí)候，給予你幫助。這個(gè)倉庫收集了眾多編程圖書，涉及主流編程語言、人工智能、算法、Linux、大數(shù)據(jù)等?？纯?，有木有你需要的。

7.VS Code Netease Music

很多開發(fā)者喜歡邊寫代碼，邊聽音樂，VS Code Netease Music 這個(gè)插件就能滿足你在 VS Code 上聽歌的愿望。它使用 Webview 實(shí)現(xiàn)，不依賴命令行播放器。

Star-Battle

Star-Battle 是一款使用 JavaScript ES6、Canvas 開發(fā)的飛船射擊類 游戲 。來 Enjoy 吧。

注：

如需轉(zhuǎn)載，煩請按下方注明出處信息，謝謝！