GesturePasswordWidget

一个用于 Flutter 的手势解锁控件，支持高度定制。

演示

1）一个简单常见的演示。

渲染

simple_demo

代码：

GesturePasswordWidget(
      lineColor: const Color(0xff0C6BFE),
      errorLineColor: const Color(0xffFB2E4E),
      singleLineCount: 3,
      identifySize: 80.0,
      minLength: 4,
      errorItem: Image.asset(
        'images/error.png',
        color: const Color(0xffFB2E4E),
      ),
      normalItem: Image.asset('images/normal.png'),
      selectedItem: Image.asset(
        'images/selected.png',
        color: const Color(0xff0C6BFE),
      ),
      answer: [0, 1, 2, 4, 7],
      color: backgroundColor,
      onComplete: (data) {
        setState(() {
          result = data.join(', ');
        });
      },
    )

2）一个复杂的演示。一条线有四个点，可以通过设置 [hitItem] 来支持选中效果。

渲染

complex_demo

代码

GesturePasswordWidget(
      lineColor: Colors.white,
      errorLineColor: Colors.redAccent,
      singleLineCount: 4,
      identifySize: 80.0,
      minLength: 4,
      hitShowMilliseconds: 40,
      errorItem: Container(
        width: 10.0,
        height: 10.0,
        decoration: BoxDecoration(
          color: Colors.redAccent,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      normalItem: Container(
        width: 10.0,
        height: 10.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      selectedItem: Container(
        width: 10.0,
        height: 10.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      hitItem: Container(
        width: 15.0,
        height: 15.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(50.0),
        ),
      ),
      answer: [0, 1, 2, 3, 6, 10, 14],
      color: backgroundColor,
      onComplete: (data) {
        setState(() {
          result = data.join(', ');
        });
      },
    )

属性

属性 描述
size GesturePasswordWidget 的宽度和高度。
identifySize 用于确定一个点是否被选中的区域大小，值越大识别越准确。
normalItem 小部件的正常显示。
selectedItem 选中时显示的小部件。
errorItem 错误时显示的小部件，仅在设置了 minLength 或 answer 时才有效。
(1) 当 minLength 不为 null 时，如果选中的点数少于 minLength，则显示 errorItem，例如，设置了 minLength = 4，但选中的点集为 [0,1,3]，总共选择了3个点，少于4个。
2) 当 answer 不为 null 时，如果选中的点集与 answer 不相等，则显示 errorItem，例如，answer = [0,1,2,4,7]，但选中的点集为 [0,1,2,5,8]，与 answer 不相等；
此外，errorItem 的显示时长由 completeWaitMilliseconds 控制。
hitItem 当此点被选中时显示的小部件，其显示时长由 hitShowMilliseconds 控制，达到显示时长后继续显示 selectedItem。
singleLineCount 单条线的总数等于 singleLineCount * singleLineCount。
color GesturePasswordWidget 的背景颜色，默认为 Theme.of(context).scaffoldBackgroundColor。
onHitPoint 选中点时触发的回调函数。
onComplete 手势滑动结束时触发的回调函数。
lineColor 正常情况下的线条颜色。
errorLineColor 错误情况下的线条颜色，请参见 [errorItem]。
answer 正确的答案，例如 [0, 1, 2, 4, 7]
loose 默认为 true。
考虑这种情况：选中了点 index=0 和 index=6，并且点 index=3 未被选中，但点 index=3 位于 index=0 和 index=6 的连线上。如果 loose=true，则获得的手势密码为 [0,3,6]，如果 loose=false，则获得的手势密码为 [0,6]。
completeWaitMilliseconds 最后一个选中的点和绘制的线在屏幕上显示的时长，之后所有点将被清除并恢复到初始状态，GesturePasswordWidget 在此期间将不再接受任何手势事件。
hitShowMilliseconds 参见 hitItem。
minLength 如果设置了此值，则长度不足时会显示 errorItem 和 errorLine。

GitHub

https://github.com/LuodiJackShen/GesturePasswordWidget