QML实现一个IP地址输入框

前言

以 Windows 网络设置里的 IP 地址输入框为参照，先看看他提供了哪些功能

 

输入数值范围不满足 0-255 ，或者该段的规定值，会弹错误提示框；

字符满三个后自动跳转到下一个 IP 段，或者按小数点也会进入下一段；

删除键删除完本段后再按删除自动去上一段进行删除 ；

按左右键如果光标在该段文本末尾或打头，光标自动进入相邻段；

如果选中了某个段的文本，则复制的是选中的文本，否则复制完整 IP 地址；

粘贴时如果是完整 IP 地址就覆盖每一项，如果是单个段数字则只覆盖当前段内容，如果粘贴的格式错误有提示；

按 TAB 键切换到别的输入组件，而不是每个段挨个切换焦点。

实现

整体可由四个输入框和三个小点组成，并用正则限制输入符合 IP 格式。为什么不用单个输入框？实现起来更复杂：

    validator: RegExpValidator{
        regExp: /^(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/
    }

特殊按键处理可通过 Keys 附加属性完成：

    Keys.enabled: true
    Keys.onPressed: {
        event.accepted=false;
        switch(event.key){
        case Qt.Key_Tab:
        case Qt.Key_Period:
             control.gotoNext(true,false);
            break;
        case Qt.Key_Left:
            if(cursorPosition==0){
                control.gotoPrev(false,false);
            }
            break;
        case Qt.Key_Right:
            if(cursorPosition==text.length){
                control.gotoNext(false,true);
            }
            break;
        case Qt.Key_Backspace:
            if(cursorPosition==0 && text.length<=0){
                control.gotoPrev(false,false);
            }
            break;
        case Qt.Key_C:
            //选中文本的话就用edit在带的复制操作
            if(event.modifiers===Qt.ControlModifier){
                event.accepted=true;
                //console.log('do copy')
                control.doCopy(selectedText.length>0);
            }
            break;
        case Qt.Key_V:
            if(event.modifiers===Qt.ControlModifier){
                event.accepted=true;
                //console.log('do paste')
                control.doPaste();
            }
            break;
        }
    }
    Keys.onReleased: {
        event.accepted=false;
        switch(event.key){
        case Qt.Key_C:
        case Qt.Key_V:
            event.accepted=(event.modifiers===Qt.ControlModifier);
            break;
        }
    }

QML 应该没法操作剪切板，所以我只能注册个 Cpp 工具类来处理复制粘贴操作：

class Clipboard : public QObject
{
    Q_OBJECT
public:
    using QObject::QObject;

    //ip放到剪切板
    Q_INVOKABLE void copyIp(QStringList ip);
    //读取剪切板ip
    Q_INVOKABLE QStringList pasteIp();
};

如果觉得重复写四个编辑框比较麻烦，我用 Repeater 来复用了单个编辑框的操作：

        Repeater{
            id: repeater
            model: 7
            IpItem {
                width: (index%2==1)?style.width:control._itemWidth
                enabled: (index%2==0)
                text: (index%2==1)?style.text:""
                font: style.font
                color: style.color
            }
        }

IPv4正则匹配：

#include <QDebug>
#include <QRegularExpression>
#include <QRegularExpressionMatch>
#include <QRegExp>

void test(const QString &ipv4)
{
    qDebug()<<ipv4;

    QString section="(\\d|[1-9]\\d|1\\d\\d|2[0-4]\\d|25[0-5])";
    QString exp=QString("^%1\\.%1\\.%1\\.%1$").arg(section);

    //Qt4
    QRegExp reg1(exp);
    qDebug()<<reg1.exactMatch(ipv4);
    //Qt5
    QRegularExpression reg2(QRegularExpression::anchoredPattern(exp));
    QRegularExpressionMatch match=reg2.match(ipv4);
    qDebug()<<match.hasMatch();
}

完整代码 github：https://github.com/gongjianbo/MyTestCode/tree/master/Qml/TestQml_20210717_IpInput

最终效果：

参考

博客：Qt编写自定义控件68-IP地址输入框 - 飞扬青云 - 博客园

博客：QtQuick/Qml自定义控件(2)-IP地址输入框_zhengtianzuo的博客-CSDN博客