QtQuick/Qml自定义控件(2)-IP地址输入框

QtQuick没有提供IP输入框控件, 于是我打算自定义开发一个.
首先来看看windows系统里的IP输入框有哪些特性
在这里插入图片描述

4个输入框 中间由3个点间隔. 再看看动态的

QtQuick/Qml自定义控件(2)-IP地址输入框_第1张图片

这里可以看出来 特性1 在第一栏输入三位数字后, 输入焦点自动切换到第二栏了.

QtQuick/Qml自定义控件(2)-IP地址输入框_第2张图片

再来看看特性2 在第二栏输入的时候 按键盘左方向移动 可以回到第一栏
向右也应该是同理的

在看看删除输入的情况 特性3

QtQuick/Qml自定义控件(2)-IP地址输入框_第3张图片

删除的时候, 如果本栏删除完. 也会顺带将输入焦点移动到前一栏去.

特性4 输入框肯定是有输入限制的, 比如中文, 超过255的数字, 特殊符号等, 这个我们可以用正则表达式来完成.

基于这4个特性 就可以开始开发了.
首先我们使用4个TextInput和3个Text就可以组装好主体界面, 再加一个外边框 搞定

QtQuick/Qml自定义控件(2)-IP地址输入框_第4张图片

接着加入输入焦点的判断和移动, 另外输入栏加入正则表达式. 完工.

QtQuick/Qml自定义控件(2)-IP地址输入框_第5张图片

访问三峰驼Qml控件大全

仅此文章的功能

联系方式:


作者 郑天佐
QQ 278969898
主页 http://www.camelstudio.cn/
邮箱 [email protected]
博客 http://blog.csdn.net/zhengtianzuo06/
github https://github.com/zhengtianzuo
QQ群 199672080

捐赠

觉得分享的内容还不错, 就请作者喝杯咖啡吧~~

你可能感兴趣的:(Silk)