代码之家  ›  专栏  ›  技术社区  ›  Alex P.

如何在QML中的文本框之间进行选项卡导航?

  •  1
  • Alex P.  · 技术社区  · 6 年前

    我有一个带有边框和 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
        }
    }
    

    我有一个包含两个组件的表单。

    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在可交互组件之间真的没有任何默认的选项卡处理吗?所以我们总是要手动指定标签?

    1 回复  |  直到 6 年前
        1
  •  1
  •   eyllanesc Yonghwan Shin    6 年前

    问题的焦点是 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 // <--
        }
    }