Focusable Qml Components (Focus My Control On Tab)

问题

i have created a custom button in qml, which i want to focus on pressing 'tab', i mean "jump to it on pressing tab if its on top of queue" by default qml has this functionality on button itself and some of other controls too but what about new components which does not exist,i saw a "FocusScope" control of qml but there is no documentation of using it and i am not sure how can i implement it, here is my control :

import QtQuick 2.4

Item {
    id: button
    width: innerText.width + 10
    height: 30
    property alias text: innerText.text;
    property alias font: innerText.font;
    property color color: "#00171f"
    property color hoverColor: "#00395f"
    property color pressColor: "#3E65FF"
    property int fontSize: 12
    property int borderWidth: 0
    property int borderRadius: 2
    property bool highlighted : true
    onEnabledChanged: state = ""
    signal clicked
    property var background
    Rectangle {
        id: rectangleButton
        anchors.fill: button
        radius: borderRadius
        color: button.enabled ? button.color : "grey"
        border.width: borderWidth
        border.color: "black"
        Text {
            id: innerText
            font.pointSize: fontSize
            font.family: "B Nazanin"
            color: "white"
            anchors.centerIn: rectangleButton
        }
    }

    //change the color of the button in differen button states
    states: [
        State {
            name: "Hovering"
            PropertyChanges {
                target: rectangleButton
                color: hoverColor
            }
        },
        State {
            name: "Pressed"
            PropertyChanges {
                target: rectangleButton
                color: pressColor
            }
        }
    ]

    //define transmission for the states
    transitions: [
        Transition {
            from: ""; to: "Hovering"
            ColorAnimation { duration: 200 }
        },
        Transition {
            from: "*"; to: "Pressed"
            ColorAnimation { duration: 10 }
        },
        Transition {
            from: "*"
            to: ""
            ColorAnimation { duration: 200 }
        }
    ]

    //Mouse area to react on click events
    MouseArea {
        hoverEnabled: true
        anchors.fill: button
        onEntered: { button.state='Hovering'}
        onExited: { button.state=''}
        onClicked: { button.clicked();}
        onPressed: { button.state="Pressed" }
        onReleased: {
            if (containsMouse)
              button.state="Hovering";
            else
              button.state="";
        }
    }
}

回答1:

It looks like you are simply looking for the activeFocusOnTab property:

Item {
    id: button
    activeFocusOnTab: true
    // ...
}

来源：https://stackoverflow.com/questions/56834971/focusable-qml-components-focus-my-control-on-tab

标签

qml