Flutter小小實踐——KLine 繪製篇(一)

快樂的小青蛙發表於2020-07-14

前言

每每在遇到問題的時候都是google尋找答案,習慣了作為一個多年的伸手黨是多麼的快樂。
最近閒來沒事,就學習學習flutter,作為一個android開發者感受了一下開發IOS的趕腳。
學習flutter的過程真的還算蠻輕鬆了,相對於android來說。

背景

本人由於對金融產品好挺感興趣的,所以決定寫一個K線元件練練手。 順利的話再接入交易自己玩玩。

Feature

  • 繪製蠟燭圖
  • 繪製成交量圖
  • MACD指標圖, 別的指標圖可擴充套件
  • 蠟燭圖上可繪製MA,EMA,BOLL等常見通道
  • 手勢處理
    • 水平滑動處理
    • 縮放處理
    • 長按處理
  • 自定義劃線功能

動手前的自我思考

  1. 如何儲存各個狀態?
  2. 自定義Widget有哪些方式?
  3. Flutter中的TouchEvent是該怎麼樣處理?

問題1:在建立Flutter 專案時會預設的生成一個Flutter的Hello World 程式片段。首先學會的就是StatelessWidget,StatefulWidget。StatefulWidget就是專門來儲存狀態的,但是StatefulWidget的侷限性也比較明顯,在跨元件傳遞狀態是比較複雜的一件事。所以在這裡我使用的是Provider作為狀態機的管理器,方便跨元件通訊。

問題2:Flutter 為了方便自定義Widget,建立了CustomPainter類,重寫paint函式就可畫畫了,非常的方便,非常的人性化。我這個暫時沒選擇直接用CustomPainter來繪製影像。Flutter中非常核心的三棵樹, Widget樹,Element樹,RenderObject樹,為了方便學習,這裡在RenderObject上來處理繪製。

問題3:查了一下flutter提供了一個GestureDetector來識別手勢,暫且用GestureDetector實現,不過這個手勢處理的地方還得自習處理,不理不當會比較坑。

結束語

由於是第一篇就不貼程式碼了,做個簡單敘述就好。


相關文章