Flutter 手势密码控件

2019年9月7日 285次阅读 来源: mochixuan

《Flutter 手势密码控件》

一个Flutter编写的手势识别验证锁。

例子

设置密码例子

《Flutter 手势密码控件》

GestureView(
    immediatelyClear: true,
    size: MediaQuery.of(context).size.width,
    onPanUp: (List<int> items) {
      setState(() {
        result = items;
      });
    },
)
验证密码例子

《Flutter 手势密码控件》

GlobalKey<GestureState> gestureStateKey = GlobalKey();

GestureView(
    key: this.gestureStateKey,
    size: MediaQuery.of(context).size.width*0.8,
    selectColor: Colors.blue,
    onPanUp: (List<int> items) {
      analysisGesture(items);
    },
    onPanDown: () {
      gestureStateKey.currentState.selectColor = Colors.blue;
      setState(() {
        status = 0;
      });
    },
)

基本思想

  • 先使用画布绘制背景: 九个圆点,每个点带属性是否被选中、颜色、宽度信息。
  • 在绘制线条: 被选中的点按顺序相互连接，最后一个点和手指当前位置绘制成一条直线。
  • 放回回馈函数: 手指按下和抬起时触发相应函数，可以做判断结果当抬起时，按下时可以更改颜色当再次输入时。

项目地址

包地址

    原文作者：mochixuan
    原文地址: https://segmentfault.com/a/1190000019827678
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞