GitHub地址:github.com/yumi0629/Fl…
(写的比较急,代码还没整理好,很凌乱,emmm,果然还是元旦之后再整理吧,→_→)
(本方案暂时只支持数字,不支持英文字母、中文等)
国际惯例先上效果图:
需求分析
这个验证码输入框的需求来源近日日群里有人提出了这么一个问题:像下面这种的控件该怎么写?
乍一看这就是一个TextField,但似乎又有那么点不太一样?我冷静思考了一下,脑子里有两套解决方案:
- 1、复制一份TextField,魔改SDK。
- 2、用4个输入框组合;
这两种方案,看着就觉得脑壳疼啊。
先说第一种,点进源码我们可以看到TextField的实现链式关系为:TextField——>EditableText——>_Editable——>RenderEditable
,而主要的绘制都集中在了RenderEditable
中的paint()
方法:
@override
void paint(PaintingContext context, Offset offset) {
······
if (_hasVisualOverflow)
context.pushClipRect(needsCompositing, offset, Offset.zero & size, _paintContents);
else
// 具体绘制内容,包括cursor和文字
_paintContents(context, offset);
}
void _paintContents(PaintingContext context, Offset offset) {
······
// 绘制cursor
if (_selection.isCollapsed && _showCursor.value && cursorColor != null) {
_paintCaret(context.canvas, effectiveOffset);
} else if (!_selection.isCollapsed && _selectionColor != null) {
······
_paintSelection(context.canvas, effectiveOffset);
}
// 绘制文字
_textPainter.paint(context.canvas, effectiveOffset);
}
复制代码
虽说生命不息,魔改不止,但是这一套魔改下来,emmmm,我选择拒绝!
再说第二种,4个控件组合,这种方式在布局上确实会简单很多,但是,致命的问题在于,要自己处理用户的手势输入,以及cursor的位置移动等等,这个过程是十分复杂的,而且容易出错。
众所周知,我小拉面是一个懒人,能走对角线的我绝对不拐弯,写代