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

前言

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

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

準(zhǔn)備開(kāi)干

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

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

搬磚

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

功夫不負(fù)有心人

效果圖展示

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

GitHub項(xiàng)目地址：

致謝

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

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

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

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

開(kāi)發(fā)環(huán)境如下：

Flutter : 2.8.1

Dart : 2.15.1

IDE : VSCode

JSON作為我們?nèi)粘ｉ_(kāi)發(fā)工作中經(jīng)常要打交道的一種數(shù)據(jù)格式，它共有6種數(shù)據(jù)類型： null , num , string , object , array , bool 。我們勢(shì)必對(duì)它又愛(ài)又恨。愛(ài)他因?yàn)樗鳛閿?shù)據(jù)處理的一種格式確實(shí)非常方便簡(jiǎn)潔。但是在我們做Flutter開(kāi)發(fā)中，又需要接觸到j(luò)son解析時(shí)，就會(huì)感覺(jué)非常棘手，因?yàn)閒lutter沒(méi)有反射，導(dǎo)致json轉(zhuǎn)模型這塊需要手寫(xiě)那繁雜的映射關(guān)系。就像下面這樣子。

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

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

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

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

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

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

我們?cè)谛陆ㄒ粋€(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)致頁(yè)面異常，一些重要信息都展示不全。因此這里需要借助第三方組件 bitsdojo_window 。通過(guò) bitsdojo_window ，我們可以實(shí)現(xiàn)窗口的定制化，拖動(dòng)，最小尺寸，最大尺寸，窗口邊框，窗口頂部放大、縮小、關(guān)閉的按鈕等。

通過(guò) InkWell 組件，可以捕捉到手勢(shì)、鼠標(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è)位置，否則它將全屏顯示。

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

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

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

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

通過(guò)Apple的開(kāi)發(fā)文檔找到有關(guān)權(quán)限問(wèn)題的說(shuō)明。其中有個(gè)授權(quán)私鑰的key為 com.apple.security.files.downloads.read-write ，表示 對(duì)用戶的下載文件夾的讀/寫(xiě)訪問(wèn)權(quán)限 。那么，使用Xcode打開(kāi)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)可以向下載目錄中讀寫(xiě)文件了。

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

原文地址：

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

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

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

flutter為什么不推薦getx

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

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

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

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

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

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

產(chǎn)生背景：

Flutter可以方便的加入現(xiàn)有的工程中。在全世界，F(xiàn)lutter 正在被越來(lái)越多的開(kāi)發(fā)者和組織使用，并且 Flutter是完全免費(fèi)、開(kāi)源的。它也是構(gòu)建未來(lái)的 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ì)對(duì)比之前的描述， 以確定底層渲染樹(shù)從當(dāng)前狀態(tài)轉(zhuǎn)換到下一個(gè)狀態(tài)所需要的最小更改。

Flutter開(kāi)源app---開(kāi)眼短視頻

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

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

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

項(xiàng)目地址：

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

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

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

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

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

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

1.Vue-EasyTable

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

2.React-Calendar

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

3.Matter

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

4.Revery

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

5.Web Accessibility Guide

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

1.SOFAJRaft

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

2. Dragonwell

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

3.Lawoole

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

4.AntNest

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

5.PHP-Awesome

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

1.FlutterBoost

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

2.MyLayout

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

3.SegementSlide

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

1.DevHub

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

2.Reqman

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

3.FreeCodeCamp

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

4.Gitter

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

5.Awesome Podcasts

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

6.編程圖書(shū)大全

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

7.VS Code Netease Music

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

Star-Battle

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

注：

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

分享標(biāo)題：flutter開(kāi)源模版,flutter 開(kāi)源
鏈接URL：http://www.chinadenli.net/article14/dsdejde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、外貿(mào)建站、小程序開(kāi)發(fā)、網(wǎng)站排名、搜索引擎優(yōu)化、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)