QML 转发器项目高亮处理

Question

我已经实现了以下部分

{
  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"
}

这里我得到这样的输出

但是我想要这样的输出（每个字符之间会有一个空隙）

我还有一个 idIpHiglight_Image 用于突出显示每个数字。启动时我需要这样的输出

但在我的例子中，突出显示没有设置到正确的位置。我得到这样的输出

谁能帮我把输出设置成这样：

此外，在每次左右按键时，我需要将光标正确移动到 next/previous 位。我写的代码像

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

执行代码后，出现类似

的错误

[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

这是我收到上述错误的行

Answer 1

我会为数字和分隔符做 2 个不同的组件，像这样：

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 ++;
        }
    }
}

结果：

QML 转发器项目高亮处理

QML repeater item highlight handling

customization

qt

repeater

qml