如何在 QML 中的文本框之间进行标签导航？

Question

我有一个带有边框和 TextInput 的 QML 组件（或者不管它是什么，只是一个在根目录中带有 Item 的文件），基本上是一个标准的文本框。

import QtQuick 2.7

Item {
    id: textBox
    clip: true

    property alias  inputText:       inputText.text
    property alias  mode:            inputText.echoMode
    property color  borderColor:     "gray"
    property int    borderWidth:     1

    Rectangle {
        id: rectInput
        anchors.fill: parent
        border.color: borderColor
        border.width: borderWidth
        radius:       4
    }

    TextInput {
        id: inputText
        anchors.fill:       parent
        anchors.leftMargin: 3
        verticalAlignment:  Text.AlignVCenter
        selectByMouse:      true
    }
}

我有一个包含其中 2 个组件的表单。

GridLayout {
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.verticalCenter: parent.verticalCenter
    width: 400
    columns: 2
    rowSpacing: 10

    Text {
        id: textName
        clip: true
        text: "Name: "
    }
    TextBox {
        id: tboxName
        Layout.fillWidth: true
        height: 30
        KeyNavigation.tab: tboxPassword
    }

    Text {
        id: textPassword
        clip:  true
        text: "Password: "
    }
    TextBox {
        id: tboxPassword
        Layout.fillWidth: true
        height: 30
        mode: TextInput.Password
    }

    ...
}

如何在它们之间进行tab导航？我尝试添加 KeyNavigation.tab 但没有效果。

顺便说一句 QML/Qt Quick 真的没有任何可交互组件之间的默认选项卡处理吗？所以我们必须始终手动指定选项卡？

Answer 1

问题是获得焦点的是TextBox，这是一个不知如何处理的项目，所以我们必须激活activeFocusOnTab 属性并处理onActiveFocusChanged 的事件：

import QtQuick 2.7

Item {
    id: textBox
    clip: true

    property alias  inputText:       inputText.text
    property alias  mode:            inputText.echoMode
    property color  borderColor:     "gray"
    property int    borderWidth:     1
    activeFocusOnTab: true // <--
    onActiveFocusChanged: if(activeFocus) inputText.focus = true // <--

   Rectangle {
        id: rectInput
        anchors.fill: parent
        border.color: borderColor
        border.width: borderWidth
        radius:       4
    }

    TextInput {
        id: inputText
        anchors.fill:       parent
        anchors.leftMargin: 3
        verticalAlignment:  Text.AlignVCenter
        selectByMouse:      true
        focus: true // <--
    }
}

如何在 QML 中的文本框之间进行标签导航？

How to make tab navigation between textboxes in QML?

qt

qml

qt-quick

qt5

qtquick2