QML 中继器项目高亮处理

Question

I have implemented the following section

{
  id: idLeftArrow
     .
     .
     .
     .
}
Row
{
    id: idIpEditModeItem
    anchors.left: idLeftArrow.right
    visible: true
    Repeater
    {
        id: idIpHighlightRepeater
        model: 12
        Text
        {
            id: idDigits
            text: "0"
            font.pointSize: 10
            color: "yellow"
        }
    }
}
Image
{
    id: idIpHiglight_Image
    width: editModeIPWidth
    height: editModeIPHeight
    x: idIpHighlightRepeater.itemAt(ipCurrSelectedDigitIndex).x
    y: idIpHighlightRepeater.itemAt(ipCurrSelectedDigitIndex).y
    visible: false
    source: "focus.png"
}

Here I am getting output like this

But I want output like this(there will be a gap between each character)

Also I have a idIpHiglight_Image which is using to highlight each digit. On launch I need output like this

But in my case the highlight is not getting set to the proper location. I am getting output something like this

Could anyone please help me to set the output exactly like this:

Also, on each left and right key press, I need to move the cursor properly to next/previous digit. I wrote code like

onIpCurrSelectedDigitIndexChanged:
{
     if( idIpHighlightRepeater.count == ipCurrSelectedDigitIndex)
     {
         ipCurrSelectedDigitIndex = 0
     }
     else if( 0 > ipCurrSelectedDigitIndex)
     {
         ipCurrSelectedDigitIndex = idIpHighlightRepeater.count - 1
     }
}

After executing the code, I am getting error like

[W] (qrc:/common/qml/controls/CustomItem.qml:120) qrc:/common/qml/controls/EditListItem.qml:120: TypeError: Type error [W] (qrc:/common/qml/controls/CustomItem.qml:119) qrc:/common/qml/controls/EditListItem.qml:119: TypeError: Type error

This the lines were i am getting the above error

Answer 1

I would do 2 different Components for the number and for the delimeter, something like this:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id: main
    visible: true
    width: 600
    height: 400

    Component {
        id: number
        Text
        {
            text: "0"
            font.pointSize: 16
            color: "yellow"
            padding: 5
            Rectangle {
                anchors.fill: parent
                color: "transparent"
                border { width: 3; color: "orange" }
                visible: itemIndex == itemSelected
            }
        }
    }

    Component {
        id: delimeter
        Text
        {
            text: "."
            font.pointSize: 16
            color: "yellow"
        }

    }
    Rectangle
    {
        id: rect
        property int selected: -1;
        color: "black"
        anchors.centerIn: parent
        width: layout.width
        height: layout.height
        Row {
            id: layout
            Repeater
            {
                id: repeater
                model: 15
                delegate: Loader {
                    id: loader
                    property int itemSelected: rect.selected;
                    property int itemIndex: index;
                    sourceComponent: ((index + 1) % 4 === 0) ? delimeter : number
                }
            }
        }
    }

    Timer {
        interval: 1000
        repeat: true
        running: true
        onTriggered: {
            if(rect.selected >= 15)
                rect.selected = 0;
            else
                rect.selected ++;
        }
    }
}

the result: