Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Tab navigation with ListView inside SwipeView



  • Hello,

    I have a problem with the tab navigation.

    In my test application I have a Button and a ListView below it. What I want is a circular tab order. I want to be able to navigate from top to bottom by pressing the tab key and from bottom to top by pressing backtab.

    • If the last item in the list has active focus and tab is pressed, jump to the button
    • If the button has active focus and tab is pressed, jump to the first item in the list
    • If the button has active focus and backtab is pressed, jump to the last item in the list

    If just a simple ListView is used this is no problem:

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.12
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
        ColumnLayout {
            anchors.fill: parent
            spacing: 5
            Button {
                id: button
                focus: true
                text: activeFocus ? "activeFocus" : "inactiveFocus"
                Layout.fillWidth: true
            }
            ListView {
                id: list
                model: 5
                spacing: 5
                Layout.fillHeight: true
                Layout.fillWidth: true
                delegate: Rectangle {
                    height: 50
                    width: parent.width
                    activeFocusOnTab: true
                    color: activeFocus ? "red" : "grey"
                    Text {
                        text: index
                        anchors.centerIn: parent
                    }
                }
            }
        }
    }
    
    

    TabChain1.png

    However, the ListView must now be used within a SwipeView (to keep things simple, I just use one ListView). Now the ListView remembers the last item which had active focus and uses it whenever the active focus changes from button to list.

    import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.12
    
    Window {
        width: 640
        height: 480
        visible: true
        title: qsTr("Hello World")
        ColumnLayout {
            anchors.fill: parent
            spacing: 5
            Button {
                id: button
                focus: true
                text: activeFocus ? "activeFocus" : "inactiveFocus"
                Layout.fillWidth: true
            }
            SwipeView {
                id: swipe
                Layout.fillHeight: true
                Layout.fillWidth: true
                ListView {
                    id: list
                    model: 5
                    spacing: 5
                    delegate: Rectangle {
                        height: 50
                        width: parent.width
                        activeFocusOnTab: true
                        color: activeFocus ? "red" : "grey"
                        Text {
                            text: index
                            anchors.centerIn: parent
                        }
                    }
                }
            }
        }
    }
    
    

    TabChain2.png

    Does anyone have an idea what is going on?


Log in to reply