QML 将键盘导航与多个列表视图同步

Posted 2023-02-16

【中文标题】QML 将键盘导航与多个列表视图同步

【英文标题】：QML synchronize keyboard navigation with multiple list views

【发布时间】：2020-03-04 13:59:39

【问题描述】：

我需要像 ListView 一样具有无限导航功能的矩阵视图。导航是指基于键盘的滚动，平台没有鼠标输入。 矩阵中item的宽度不统一，是基于模型item属性的。

我确实尝试过 GirdView，但我发现了两个问题

GirdView 的宽度限制为屏幕宽度 如果 GirdView 宽度增加到超过屏幕宽度，则在导航时，activeFocusedItem 在屏幕上将不可见 网格单元格的宽度是列中网格项的最大宽度

TableView 也有类似的问题，不过没试过。

我正在考虑水平ListViews的ListView

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 上看到滚动效果。

【问题讨论】：

为什么要投反对票？

【参考方案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 + ")"