Tab或Enter键如何在QML中跳转控件

时间:2018-12-06 16:21:49

标签: qt qml

我在这里要做的是防止tabenter将焦点转移到特定控件上,而转到下一个控件。

例如,假设我有3个顺序TextField 我现在将焦点放在第一个TextField上,然后按tab,而不是跳到第二个TextField,而是将焦点转到第三个TextField

完整的代码示例:

import QtQuick 2.9
import QtQuick.Controls 2.2
    import QtQuick.Layouts 1.3

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 1400

    Page {
        id: page
        anchors.fill: parent
        property int responsiveWidth: 1000
        property int maximumWidth: 900

        ScrollView {
            id:configScroll
            anchors.fill: parent
            function scrollToY(y) { 
                configScroll.flickableItem.contentY = y-30
            }
            GridLayout {
                columns: 2
                Keys.onPressed: {
                    if(event.key==Qt.Key_Return)
                    for (var i = 0; i < children.length; ++i)
                        if (children[i].focus) {
                            children[i].nextItemInFocusChain().forceActiveFocus()
                            break
                        }
                }
                width: page.width > page.responsiveWidth ? page.maximumWidth : page.width
                anchors.top: parent.top
                anchors.left: parent.left
                anchors.leftMargin: page.width > page.responsiveWidth ? (page.width - childrenRect.width)/2 : 10
                anchors.rightMargin: page.width > page.responsiveWidth ? 0 : 10


                    Label {
                        text: "Company Name"
                        color: "red"
                        Layout.fillWidth: true
                    }

                    TextField  {
                        objectName: "company_name"
                        font.bold: true
                        Layout.fillWidth: true
                        Layout.rightMargin: 10
                        onFocusChanged: if(focus) { configScroll.scrollToY(y); }
                    }


                    Label {
                        text: "tab or enter passes this TextField"
                        color: "red"
                        Layout.fillWidth: true
                    }

                    TextField  {
                        objectName: "company_name2"
                        font.bold: true
                        Layout.fillWidth: true
                        Layout.rightMargin: 10
                        onFocusChanged: if(focus) { configScroll.scrollToY(y); }
                    }

                    Label {
                        text: "label"
                        color: "red"
                        Layout.fillWidth: true
                    }

                    TextField  {
                        objectName: "company_name"
                        font.bold: true
                        Layout.fillWidth: true
                        Layout.rightMargin: 10
                        onFocusChanged: if(focus) { configScroll.scrollToY(y); }
                    }
            }
        }
    }
}

1 个答案:

答案 0 :(得分:1)

您可以使用QML类型KeyNavigation来设置自定义导航,请查看文档:{​​{3}} 您可以将KeyNavigation.tap属性设置为导航到特定的ID,如下所示:

TextField  {
    id: field1
    objectName: "company_name"
    font.bold: true
    Layout.fillWidth: true
    Layout.rightMargin: 10
    onFocusChanged: if(focus) { configScroll.scrollToY(y); }
    KeyNavigation.tab: field3
}

对于使用Enter键进行导航,这是针对特定情况的解决方案:

children[i].nextItemInFocusChain().nextItemInFocusChain().forceActiveFocus()