Обработка выделения элементов ретранслятора QML - PullRequest
Новая
       23

Обработка выделения элементов ретранслятора QML

0 голосов
/ 06 февраля 2020

Я реализовал следующий раздел 

{
  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)

Также у меня есть idIpHiglight_Image, который используется для выделения каждого ди git. При запуске мне нужен вывод, подобный этому

On launch I need output like this

Но в моем случае выделение не устанавливается в нужном месте. Я получаю что-то вроде этого

I am getting output something like this

Может кто-нибудь помочь мне настроить вывод так:

this

Кроме того, при каждом нажатии левой и правой клавиши мне нужно правильно перемещать курсор к следующему / предыдущему di git. Я написал код как 

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

После выполнения кода, я получаю ошибку вроде

[W] (qr c: / common / qml / controls / CustomItem. qml: 120) qr c: / common / qml / controls / EditListItem.qml: 120: Ошибка типа: ошибка типа [W] (qr c: / common / qml / controls / CustomItem.qml: 119) qr c: / common / qml / controls / EditListItem.qml: 119: Ошибка типа: Ошибка типа

Это строки, в которых я получаю вышеуказанную ошибку

1 Ответ

0 голосов
/ 06 февраля 2020

Я бы сделал 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 ++;
        }
    }
}

результат:

enter image description here

...