QMLのテキストボックス間でタブナビゲーションを作成するにはどうすればよいですか？

debugcn 投稿 Dev

アレックスP。

境界線と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
    }

    ...
}

それらの間でタブナビゲーションを行う方法は？追加しようとしましたKeyNavigation.tabが、効果はありませんでした。

ところで、QML / Qt Quickには、対話可能なコンポーネント間でのデフォルトのタブ処理が実際にはありませんか？したがって、常に手動でタブを指定する必要がありますか？

eyllanesc

問題は、フォーカスを受け取る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 // <--
    }
}

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]