QML synchronize keyboard navigation with multiple list views - qt

Question

I need something like a Matrix view with infinite navigation capability just like ListView. By navigation I mean keyboard based scrolling, platform does not have mouse inputs.
Width of items with in matrix is not uniform, it's based on model item property.
I did try GirdView but I see two problems
Width of GirdView is limited to width of screen
If GirdView width is increased beyond screen width the activeFocusedItem wont be visible on scree upon navigating
Width of grid cell is max of width of grid items in column
TableView also have similar problem, haven't tried it out though.
I am considering ListView of horizontal ListViews
import QtQuick 2.0
ListView {
id: mat
model: 10
height: 120
width: parent.width
anchors.centerIn: parent
focus: true
highlightMoveDuration: 100
highlightMoveVelocity: -1
spacing: 0
delegate: ListView {
property string matIndex: index
id: eList
height: 60
width: parent.width
orientation: Qt.Horizontal
highlightMoveDuration: 100
highlightMoveVelocity: -1
model: 100
delegate: Rectangle {
height: 50
width: (Math.random() * 50) + 50
color: index % 2 == 0 ? "lightblue": "lightgreen";
radius: 4
border.width: activeFocus ? 3 : 0
border.color: "green"
Text {
anchors.centerIn: parent
text: "(" + eList.matIndex + "," + index + ")"
}
}
}
}
This way I am able to manage uneven items width.
However I am stuck with navigation, I can navigate only one list at a time. In above snapshot I have navigated on third row & activeFocus is on item with index 50. How can I synchronize multiple ListView navigation so that I see scrolling effect on all horizontal ListViews.

Answer 1

I would try to use the active ListView's "onContentXChanged" handler to scroll all of the non-active (but visible) ListViews' content to the same X position.
Update:
Here is a rudimentary implementation, based on the op's code:
import QtQuick 2.0
ListView {
id: mat
model: 10
height: 120
width: 600
//anchors.centerIn: parent
focus: true
highlightMoveDuration: 100
highlightMoveVelocity: -1
spacing: 0
property var updateItemsScroll: function (pos)
{
console.log("Update position to" , pos);
for( var i = 0; i < mat.count; i++)
{
if (currentIndex != i &&
mat.contentItem.children[i])
{
mat.contentItem.children[i].contentX = pos;
}
}
}
delegate: ListView {
property string matIndex: index
id: eList
height: 60
width: parent.width
orientation: Qt.Horizontal
highlightMoveDuration: 100
highlightMoveVelocity: -1
onContentXChanged: updateItemsScroll(contentX);
model: 100
delegate: Rectangle {
height: 50
width: (Math.random() * 50) + 50
color: index % 2 == 0 ? "lightblue": "lightgreen";
radius: 4
border.width: activeFocus ? 3 : 0
border.color: "green"
Text {
anchors.centerIn: parent
text: "(" + eList.matIndex + "," + index + ")"
}
}
}
}