QML ListView和按键导航-单个按键事件的处理

Question

我正在使用Qt 5.6.2（Windows 10），并且具有QObject派生的映射器，该映射器将QKeyEvent发送到当前关注的QML项。 我的基类有一个虚拟的mapToKey()函数，然后在我要使用的各种映射器中对其进行覆盖。 例如，下面的映射函数是我的LeftArrowMapper一部分，并发送左箭头键事件：

void LeftArrowMapper::mapToKey()
{
    // Retrieve root of QML context
    QObject* root = engine->rootObjects()[0];
    // Get currently focused item
    QQuickItem *item = (root->property("activeFocusItem")).value<QQuickItem *>();
    if (item == NULL) qDebug() << "No item";

    // Create a key and a key event
    Qt::Key key = Qt::Key_Left;
    QKeyEvent* event = new QKeyEvent(QKeyEvent::KeyPress,
                                     key,
                                     Qt::NoModifier,
                                     KeySequence(key).toString());

    // Send it to the focused QML item
    QCoreApplication::postEvent(item,event);
}

如果给定的项目支持键事件，它将做出相应的反应。 否则，收到的按键事件将不会触发任何响应。 我已经使用TextField （基于Text的自定义组件（使用通过key事件发送的text简单地更新text属性）等进行了测试，但是没有遇到任何问题。 直到我开始使用ListView ...

我正在尝试使用键盘的左右箭头键导航ListView ，并使用映射器的mapToKey()函数人为地创建按键事件（此处的要点： 将硬件事件（如将真实按钮按到Qt事件 ） 映射到 ）。 在Qt 5.6中，将focus属性设置为true可以启用带键的导航（在5.8和5.7中，必须将keyNavigationEnabled属性设置为true ； Qt 5.6中没有此类属性）。

我的ListView如下所示：

ListView {
    id: list
    orientation: Qt.Horizontal
    width: rootWindow.width
    height: 50

    Keys.onPressed: {
        console.log("list: " + event.key + " : " + event.text)
        if (event.key == Qt.Key_Left) console.log("Moving to the left");
        else if (event.key == Qt.Key_Right) console.log("Moving to the right");
    }

    model: ListModel {
        id: items
    }
    delegate: Rectangle {
        width: 50
        height: 50
        Text {
            anchors.centerIn: parent
            text: "[" + name + "]"
        }
    }

    Component.onCompleted: function() {
        for(var i = 1; i <= 100; i++) {
            items.append({"name" : i});
        }
    }
    onFocusChanged: {
        console.log("List focus has changed");
    }
}

我发现的问题是此QML组件处理键事件的奇怪方式。 似乎它试图模仿您在滚动鼠标中的项目时可以使用鼠标进行的基于动力学的滑动（考虑了加速度）。 这意味着：

• 如果长时间按住箭头键（大约2秒 ），则会触发滚动视图-启用后，它不会滚动单个项目，而是滚动多个项目
• 在触发上述滚动之后，用户可以继续按箭头键以继续快速滚动。 此时，还可以滚动每个按键事件一个项目，但是...
• 更改方向会导致上述行为重置，因此用户需要执行另一个“触发滚动”事件才能向相反方向滚动
• 触发多个单独的按键事件也会触发滚动，但是这次一次只能触发一个项目。 同样，我上面提到的时间间隔似乎不适用于这里。 用户需要按给定的箭头键7次（至少这是我计算的次数），然后才能选择列表中的下一个/上一个项目

似乎在内部映射需要一定数量的按下并释放或按下并保持X秒的按键事件，以实际触发ListView某些响应。

现在，我的一位同事创建了我们正在使用的ListView的自定义键导航，并且工作正常。 但是我想知道是否没有一些可以解决此问题的秘密设置（或者我们都错过了文档中的备忘录）。 我可以看到这种与键进行交互（模拟加速）的应用程序，但是对于我正在研究的场景，我真的不需要它，或者至少现在不需要。 另外，如果我想在某个时候添加伪加速部分，了解如何完成将非常有用。

Answer 1

在基于动能碰擦ListView当您按下左/右箭头键是从动画ListView.highlight 。 为了使其可见，我们可以向您的列表中添加一些代码：

ListView {
    id: list

    Keys.onPressed: {
        console.log(list.currentIndex);
        //...
    }
    delegate: Item { // so we can see highlight in background
        width: 50
        height: 50
        Text {
            anchors.centerIn: parent
            text: "[" + name + "]"
        }
    }
    highlight: Rectangle {
        width: 50
        height: 50
        color: "pink"
    }
    //...
}

当您按向右箭头键时， currentIndex将更改，并且突出显示将移动到该索引。 如果您像这样显式更改currentIndex则可以看到相同的动画：

Button {
    text: "go to 45"
    onClicked: list.currentIndex = 45;
}

若要自定义动画，可以更改ListView.highlightMoveDuration和ListView.highlightMoveVelocity属性，或将ListView.highlightFollowsCurrentItem设置为false以将其关闭。 您还可以按照ListView示例代码制作自己的突出显示动画。

似乎在内部映射需要一定数量的按下并释放或按下并保持X秒的按键事件，以实际触发ListView某些响应。

处理关键事件时， ListView没有魔术，它只是不断地更改currentIndex ，而QML中的动画可以完美地处理它。