可聚焦的Qml组件(在选项卡上关注我的控件)

时间:2019-07-01 11:34:33

标签: qt qml

我已经在qml中创建了一个自定义按钮,我想着重于按“ tab”,我的意思是“默认情况下,“如果在队列顶部,则在按tab时跳到它上”)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="";
        }
    }
}

1 个答案:

答案 0 :(得分:1)

您似乎只是在寻找activeFocusOnTab属性:

sudo apt-get install xvfb xserver-xephyr vnc4server