Flutter小小实践——KLine 绘制篇(一)

1,427 阅读2分钟

前言

每每在遇到问题的时候都是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实现,不过这个手势处理的地方还得自习处理,不理不当会比较坑。

结束语

由于是第一篇就不贴代码了,做个简单叙述就好。