QML实现一个IP地址输入框

青旅半醒 2022-08-30 00:42 292阅读 0赞

# 前言 #

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

![20210717175135422.gif][]

![20210717181744650.png][]

![20210717181911230.png][]

> 输入数值范围不满足 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/MyTestCode2021/tree/master/Qml/TestQml\_20210717\_IpInput][https_github.com_gongjianbo_MyTestCode2021_tree_master_Qml_TestQml_20210717_IpInput]

最终效果：

![20210717181203258.png][]

# 参考 #

博客：[https://www.cnblogs.com/feiyangqingyun/p/11665022.html][https_www.cnblogs.com_feiyangqingyun_p_11665022.html]

博客：[https://blog.csdn.net/zhengtianzuo06/article/details/89186074][https_blog.csdn.net_zhengtianzuo06_article_details_89186074]

[20210717175135422.gif]: /images/20220829/0bd3826615644a51a125aa3e12dfc221.png
[20210717181744650.png]: /images/20220829/884a3f700d2649e3a76f5bf1c6e57dd3.png
[20210717181911230.png]: /images/20220829/d92bdddd88ac452d9e8c91e553e01ad2.png
[https_github.com_gongjianbo_MyTestCode2021_tree_master_Qml_TestQml_20210717_IpInput]: https://github.com/gongjianbo/MyTestCode2021/tree/master/Qml/TestQml_20210717_IpInput
[20210717181203258.png]: /images/20220829/0a8b53a0890e45d0b603bff6abea38e8.png
[https_www.cnblogs.com_feiyangqingyun_p_11665022.html]: https://www.cnblogs.com/feiyangqingyun/p/11665022.html
[https_blog.csdn.net_zhengtianzuo06_article_details_89186074]: https://blog.csdn.net/zhengtianzuo06/article/details/89186074