QML synchronize keyboard navigation with multiple list views

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.

zgyarmati zgyarmati · Accepted Answer · 2020-03-06T23:58:47

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 + ")"
            }
        }
    }
}

QML synchronize keyboard navigation with multiple list views

1 Answers