QML синхронизирует навигацию клавиатуры с несколькими представлениями списка

Question

Мне нужно что-то вроде представления Matrix с возможностью бесконечной навигации, как ListView. Под навигацией я подразумеваю прокрутку на основе клавиатуры, платформа не имеет мышиных входов. Ширина элементов в матрице неодинакова, она основана на свойстве элемента модели.

Я попробовал GirdView, но вижу две проблемы

1. Ширина GirdView ограничена шириной экрана
   • Если ширина GirdView превышает ширину экрана, activeFocusedItem не будет виден на экране при навигации
2. Ширина ячейки сетки равна максимальной ширине элементов сетки в столбце

TableView также имеет аналогичную проблему, хотя еще не пробовал.

Я рассматриваю ListView горизонтальных 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 + ")"
            }
        }
    }
}

Таким образом, я могу управлять неравномерной шириной элементов.

Однако я застрял в навигации, я могу перемещаться только по одному списку за раз. В приведенном выше снимке я перешел на третью строку, и activeFocus находится на элементе с индексом 50. Как я могу синхронизировать множественную навигацию ListView, чтобы увидеть эффект прокрутки на всех горизонтальных ListView.

Answer 1

Я бы попытался использовать активный обработчик ListView «onContentXChanged», чтобы прокрутить все неактивное (но видимое) содержимое ListViews в одну и ту же позицию X.

Обновление: вот элементарная реализация, на основании кода оп:

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