可聚焦的 Qml 组件（将我的控件聚焦在选项卡上）

Question

我在 qml 中创建了一个自定义按钮，我想重点关注按“选项卡”，我的意思是“如果它位于队列顶部，则按选项卡跳转到它”默认情况下，qml 在按钮本身和其他一些控件上具有此功能也是，但是不存在的新组件呢，我看到了 qml 的“FocusScope”控件，但没有使用它的文档，我不确定如何实现它，这是我的控件：

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="";
        }
    }
}

Answer 1

看起来您只是在寻找该activeFocusOnTab房产：

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