一個Flutter編寫的手勢識別驗證鎖。
例子
設定密碼例子
GestureView(
immediatelyClear: true,
size: MediaQuery.of(context).size.width,
onPanUp: (List<int> items) {
setState(() {
result = items;
});
},
)
複製程式碼驗證密碼例子
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;
});
},
)
複製程式碼基本思想
- 先使用畫布繪製背景: 九個圓點,每個點帶屬性是否被選中、顏色、寬度資訊。
- 在繪製線條: 被選中的點按順序相互連線，最後一個點和手指當前位置繪製成一條直線。
- 放回回饋函式: 手指按下和抬起時觸發相應函式，可以做判斷結果當抬起時，按下時可以更改顏色當再次輸入時。