Tab navigation with ListView inside SwipeView
Unsolved
QML and Qt Quick
-
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 } } } } }
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 } } } } } }
Does anyone have an idea what is going on?