IP输入框及端口输入框----qml实现

最近项目中使用QML开发，要实现一个类似windows下的IP及端口输入框，现贴上代码以作备忘

//********************************IP********************************
import QtQml 2.2
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window{
    id: messageDialog
    width: 300; height: 200
    //flags: Qt.FramelessWindowHint | Qt.Dialog
    visible: false
    modality: Qt.WindowModal
    title: "ip输入框--qml实现"

    //外边传入的ip，字符串类型
    property string outSideTextContent/*:"192.168.0.1"*/
    //内部自己输入的内容，要叠加各个部分
    property string ipContent: firstText.text + firstPoint.text + secondText.text + secondPoint.text + thirdText.text + thirdPoint.text + fourthText.text
    signal ipChanged()

    onIpChanged: {
        ipContent = firstText.text + firstPoint.text + secondText.text + secondPoint.text + thirdText.text + thirdPoint.text + fourthText.text
        console.log("ipContent:",ipContent)
    }

    function spiltStringInIp(index){
        var ipStringArray = outSideTextContent.split(".")
        var userNeedString
        switch( index ){
        case 0:
            userNeedString = ipStringArray.shift()
            break
        case 1:
            var newAry = ipStringArray.slice(0,2)
            userNeedString = newAry.pop()
            break
        case 2:
            var newAry1 = ipStringArray.slice(0,3)
            userNeedString = newAry1.pop()
            break
        case 3:
            userNeedString = ipStringArray.pop()
            break
        default:
            userNeedString = ""
            console.log("ip格式错误！")
        }
        return userNeedString

    }

    function fullContent(index){
        switch(index){
        case 1:
            firstText.focus = false
            secondText.focus = true
            break
        case 2:
            secondText.focus = false
            thirdText.focus = true
            break
        case 3:
            thirdText.focus = false
            fourthText.focus = true
            break
        default:

        }
    }

    function userPressKys(event,index){
        switch(event.key){
        case Qt.Key_Left:
            leftPressed(index)
            break
        case Qt.Key_Right:
            rightPressed(index)
            break
        case Qt.Key_Backspace:
            backspacePressed(index)
            break
        case Qt.Key_Period:
            periodPressed(index)
            break
        default:
            return
        }

    }

function periodPressed(index){
        switch( index ){
        case 1:
            firstText.focus = false
            secondText.focus = true
            break
        case 2:
            secondText.focus = false
            thirdText.focus = true
            break
        case 3:
            thirdText.focus = false
            fourthText.focus = true
            break
        default:
        }
    }

    function backspacePressed(index){
        switch(index){
        case 1:
            if( firstText.text.length != 0 )
                firstText.remove(firstText.text.length,firstText.text.length)
            else{

            }
            break
        case 2:
            if( secondText.text.length != 0 && secondText.cursorPosition !=0 ){
                secondText.remove(secondText.text.length,secondText.text.length)
            }
            else{
                firstText.focus = true
                secondText.focus = false
            }
            break
        case 3:
            if( thirdText.text.length != 0 && thirdText.cursorPosition !=0 ){
                thirdText.remove(thirdText.text.length, thirdText.text.length)
            }
            else{
                secondText.focus = true
                thirdText.focus = false
            }
            break
        case 4:
            if( fourthText.text.length != 0 && fourthText.cursorPosition !=0 ){
                fourthText.remove(fourthText.text.length, fourthText.text.length)
            }
            else{
                thirdText.focus = true
                fourthText.focus = false
            }
            break
        default:

        }
    }

    function leftPressed(index){
        switch(index){
        case 1:
            break
        case 2:
            if( secondText.cursorPosition == 0 ){
                firstText.focus = true
                secondText.focus = false
                firstText.cursorPosition = firstText.text.length
            }
            break
        case 3:
            if( thirdText.cursorPosition == 0 ){
                secondText.focus = true
                thirdText.focus = false
                secondText.cursorPosition = secondText.text.length
            }
            break
        case 4:
            if( fourthText.cursorPosition == 0 ){
                thirdText.focus = true
                fourthText.focus = false
                thirdText.cursorPosition = thirdText.text.length
            }
            break
        default:
            console.log("nothing to do .......!")
        }
    }

    function rightPressed(index){
        switch(index){
        case 1:
            if( firstText.cursorPosition >= firstText.text.length ){
                firstText.focus = false
                secondText.focus = true
                secondText.cursorPosition = 0
            }
            break
        case 2:
            if( secondText.cursorPosition >= secondText.text.length ){
                secondText.focus = false
                thirdText.focus = true
                thirdText.cursorPosition = 0
            }
            break
        case 3:
            if( thirdText.cursorPosition >= thirdText.text.length ){
                thirdText.focus = false
                fourthText.focus = true
                fourthText.cursorPosition = 0
            }
            break
        default:
            console.log("nothing to do .......!")
        }
    }


    Rectangle{
        id:rootRectangle
        width: parent.width;height: parent.height
        border.color: "red"

        Rectangle{
            id: ipRectangle
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.horizontalCenterOffset: -10
            anchors.verticalCenter: rootRectangle.verticalCenter
            anchors.verticalCenterOffset: -20
            width: 270
            height: 35
            border.color: "black"

            TextInput{
                id:firstText
                width:40
                height: parent.height
                font.pixelSize: 20
                text: spiltStringInIp(0)
                anchors.left: parent.left
                anchors.leftMargin: 0
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                validator: RegExpValidator{regExp: /(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/}//输入正则限制
                onTextChanged: {
                    if( firstText.text.length >=3 ){
                        fullContent(1)
                    }
                    ipChanged()
                }
                Keys.onPressed: {
                    userPressKys(event,1)
                }
            }

            Text {
                id: firstPoint
                text: qsTr(".")
                font.pixelSize: 30
                anchors.left: parent.left
                anchors.leftMargin: 40
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }

            TextInput{
                id: secondText
                width: 40
                height: parent.height
                font.pixelSize: 20
                text:spiltStringInIp(1)
                anchors.left: parent.left
                anchors.leftMargin: 45
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                validator: RegExpValidator{regExp: /(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/}
                onTextChanged: {
                    if( secondText.text.length >=3 ){
                        fullContent(2)
                    }
                    ipChanged()
                }
                Keys.onPressed: {
                    userPressKys(event,2)
                }
            }

            Text {
                id: secondPoint
                text: qsTr(".")
                font.pixelSize: 30
                anchors.left: parent.left
                anchors.leftMargin: 85
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
            TextInput{
                id: thirdText
                width: 40
                height: parent.height
                font.pixelSize: 20
                text:spiltStringInIp(2)
                anchors.left: parent.left
                anchors.leftMargin: 90
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                validator: RegExpValidator{regExp: /(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/}
                onTextChanged: {
                    if( thirdText.text.length >=3 ){
                        fullContent(3)
                    }
                    ipChanged()
                }
                Keys.onPressed: {
                    userPressKys(event,3)
                }
            }
            Text {
                id: thirdPoint
                text: qsTr(".")
                font.pixelSize: 30
                anchors.left: parent.left
                anchors.leftMargin: 130
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
            TextInput{
                id: fourthText
                width: 40
                height: parent.height
                font.pixelSize: 20
                text:spiltStringInIp(3)
                anchors.left: parent.left
                anchors.leftMargin: 135
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                validator: RegExpValidator{regExp: /(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/}
                onTextChanged: {
                    ipChanged()
                }

                Keys.onPressed: {
                    userPressKys(event,4)
                }
            }
        }

    }
}

//*************************************PORT*****************************************
 	//外部传入的端口内容
 	property string outSideText
 	//可从外边读取端口的内容
    property string text: portTextInput.text
    TextInput{
        id: portTextInput
        width: 50
        height: parent.height
        anchors.left: parent.left
        font.family: "MicrosoftYaHeiUI"
        font.pixelSize: 14
        color: "#575757"
        text: outSideText
        selectByMouse: true
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        //主要是正则限制，其他的代码都是没营养的
        validator: RegExpValidator{regExp: /^[1-9][0-9]{0,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]{1}|6553[0-5]$/}
    }

备注：正则表达式用来规范用户输入实在是太方便了，上述所用到的正则表达式都是网上搜索的，正则这一块有时间还是得啃啃。

如若有不足或者错误的地方，欢迎指正