Как сделать вкладку навигации между текстовыми полями в QML?

Question

У меня есть компонент QML (или что-то еще, просто файл с Item в корне) с границей и TextInputв основном стандартное текстовое поле.

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
    }

    ...
}

Как сделать вкладку навигации между ними? Я пытался добавить 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 // <--
    }
}