auto KeyNavigation.tab для пользовательских компонентов "прямоугольник или элемент" в QML

Question

в Qml есть автоматическая навигация по клавишам для уже известных компонентов, таких как флажок, текстовое поле, кнопка и т. Д., У меня есть пользовательский компонент, который представляет собой элемент или прямоугольник, и я хочу, чтобы для него была та же функциональность, без записи
KeyNavigation.tab: componentid
Вот один из моих пользовательских элементов управления:

Rectangle {
    signal clicked
    property alias font : icoText.font.family
    property alias icon : icoText.text
    property alias size : icoText.font.pixelSize
    property alias toolTip : tooltipText.text
    property string colorEnter :"#0481ff"
    property string colorExit :"#00171f"
    id: root
    implicitWidth: 50
    implicitHeight: 50
    //width: childrenRect.width
    radius: 0
    //height: childrenRect.height
    color: colorExit
    state: "default"
    Text {
        id: icoText
        text: ""
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        font.pixelSize: 25
        font.family: "fontawesome"
        visible: text!= ""
        color: "white"
    }
    ToolTip {
        id:tooltipText
        text: ""
        delay: 500
        timeout: 2000
        visible: mouseArea.containsMouse && text!=""
        font.family:  "B Nazanin"
        contentItem: Text {
            text: tooltipText.text
            font: tooltipText.font
            color: "white"
        }

        background: Rectangle {
            color: "#cc000000"
            border.color: "black"
        }
    }
    InnerShadow {
        id:shadow
        anchors.fill: icoText
        radius: 1.0
        samples: 17
        horizontalOffset: 1
        color: colorExit
        source: icoText
        visible: false
    }
    MouseArea{
        id: mouseArea
        anchors.fill: parent
        hoverEnabled: true
        onEntered: root.color = colorEnter
        onExited: root.color =  root.state == "transparent"? "transparent" : root.colorExit

        onPressed: {
            shadow.visible = true
        }

        onReleased: {
            shadow.visible = false
        }
        onClicked: {
            root.clicked()
        }
    }
    states: [
        State {
            name: "transparent"
            PropertyChanges {
                target: root
                color:"transparent"
            }
            PropertyChanges {
                target: icoText
                color:colorExit
            }
        },
        State{
            name: "default"
            PropertyChanges {
                target: root
                color:colorExit
            }
            PropertyChanges {
                target: icoText
                color:"white"
            }
        }

    ]
}

, который будет находиться внутри страницы, подобной этой:

Item{
    myControl{

    }
    myControl{

    }
}

этот компонент по умолчанию не проходит по нажатию клавиши Tab, что должноя делаю?я уже попробовал это безуспешно, я думаю, что это должно быть внутри FocusScope но из-за плохой документации я не получил простой пример для этого

Answer 1

По моему опыту навигация по клавишам работает только с собственными компонентами, такими как флажок, текстовое поле, кнопка и т. Д.

Чтобы обойти эту проблему, я использовал поддельный собственный компонент, скрытый с тем же размером моего пользовательского компонента, какследующий пример:

Rectangle {
    id: myCustomComponent1
    width: 100
    height: 100
    color: red

    Button {
        id: buttonFake1
        text: "My Accessible text Component 1"
        width: parent.width
        height: parent.height
        opacity: 0 // hide the fake component
        Accessible.role: Accessible.defaultButton
        Accessible.name: text
        KeyNavigation.tab: buttonFake2

        onClicked: {
            console.log(index)
        }

        onFocusChanged: {
            if(focus === true){
                // Here do what you want with your custom component
                // For example, change color, size, ...
                Do_what_you_Want()

                // And then set back the focus at the fake native component 
                // to key navigation keeps working from the same component
                buttonFake1.focus = true 
            }
        }
    }
}

Rectangle {
    id: myCustomComponent2
    width: 100
    height: 100
    color: green

    Button {
        id: buttonFake2
        text: "My Accessible text Component 2"
        width: parent.width
        height: parent.height
        opacity: 0 // hide the fake component
        Accessible.role: Accessible.defaultButton
        Accessible.name: text
        KeyNavigation.tab: buttonFake1

        onClicked: {
            console.log(index)
        }

        onFocusChanged: {
            if(focus === true){
                // Here do what you want with your custom component
                // For example, change color, size, ...
                Do_what_you_Want()

                // And then set back the focus at the fake native component 
                // to key navigation keeps working from the same component
                buttonFake2.focus = true 
            }
        }
    }
}