Qt 及 QML 处理多个按键同时按下

深藏阁楼爱情的钟 2023-03-02 15:54 341阅读 0赞

# 1.思路 #

想写个判断哪些方向键同时按下的逻辑，结果发现 Qt 的按键事件只能取到单个键值，而 QKeyEvent::modifiers() 又只能获取 Ctrl 或者 Shift 这种辅助按键。一番百度之后，发现可以使用容器保存按键值，在 keyPressEvent 添加按键值，在 keyReleaseEvent 移除按键值。

不过单单处理按键的按下和弹起还不够，还需要注意一些事项：

A.弹起其中一个按键时，按键事件的触发会停顿一下。所以，不能在按键事件里直接处理逻辑，需要加个定时器来遍历我们的键值容器；

B.按键长按时会重复触发按下和弹起两个事件，这可能导致我们的键值容器在遍历时值不对（比如长按触发按键事件，导致定时器触发时我们的容器正好弹出键值就为空了）。所以，我们要单独判断下 QKeyEvent 的 isAutoRepeat，如果是自动重复触发就不处理。

实现效果，以移动方块为例（两个方向键同时按下就是斜着移动）：

![2020073000024735.gif][]

分别展示 QWidget 和 QML 的示例。

## 2.QWidget 代码 ##

#ifndef UNIT4MOVE_H
    #define UNIT4MOVE_H
    
    #include <QOpenGLWidget>
    #include <QOpenGLFunctions_4_0_Compatibility>
    #include <QMatrix4x4>
    #include <QVector3D>
    #include <QTimer>
    
    //按键移动物体
    class Unit4Move : public QOpenGLWidget, protected QOpenGLFunctions_4_0_Compatibility
    {
        Q_OBJECT
    public:
        explicit Unit4Move(QWidget *parent = nullptr);
    
    protected:
        //设置OpenGL资源和状态。在第一次调用resizeGL或paintGL之前被调用一次
        void initializeGL() override;
        //渲染OpenGL场景，每当需要更新小部件时使用
        void paintGL() override;
        //设置OpenGL视口、投影等，每当尺寸大小改变时调用
        void resizeGL(int width, int height) override;
    
        //按键按下
        void keyPressEvent(QKeyEvent *event) override;
        //按键释放
        void keyReleaseEvent(QKeyEvent *event) override;
        //设置切换显示的时候获取焦点
        void showEvent(QShowEvent *event) override;
    
    private:
        //顶点列表
        QList<QVector3D> vertexList;
        //移动
        float xOffset=0;
        float yOffset=0;
        //当前按键按下的列表
        //因为Qt按键事件只能判断出一个键值和辅助键值的组合，
        //所以自己保存按下的按键
        QSet<int> pressedKeys;
        //刷新定时器
        QTimer *updateTimer;
    };
    
    #endif // UNIT4MOVE_H

#include "Unit4Move.h"
    
    #include <QPainter>
    #include <QVector3D>
    #include <QtMath>
    #include <QKeyEvent>
    #include <QDebug>
    
    Unit4Move::Unit4Move(QWidget *parent)
        : QOpenGLWidget(parent)
    {
        //默认没得焦点，没法接收按键
        setFocusPolicy(Qt::StrongFocus);
    
        //多个按键按下还有一个问题，就是最后那个按键弹起后就不会重复触发了
        //所以刷新我们可以用定时器来判断容器列表，release时判断为空就关，press就开
        updateTimer=new QTimer(this);
        connect(updateTimer,&QTimer::timeout,[this]{
            //qDebug()<<"timeout"<<pressedKeys;
            if(pressedKeys.isEmpty()){
                updateTimer->stop();
                return;
            }
            for(int key:pressedKeys)
            {
                switch (key) {
                case Qt::Key_Up:
                    yOffset+=0.1f;
                    break;
                case Qt::Key_Down:
                    yOffset-=0.1f;
                    break;
                case Qt::Key_Left:
                    xOffset-=0.1f;
                    break;
                case Qt::Key_Right:
                    xOffset+=0.1f;
                    break;
                default:
                    break;
                }
            }
            update();
        });
    }
    
    void Unit4Move::initializeGL()
    {
        //此为Qt接口:为当前上下文初始化OpenGL函数解析
        initializeOpenGLFunctions();
    
        //初始化
        //矩形分为两个三角
        vertexList=QList<QVector3D>{
        {0.5f,0.5f,0.0f},
        {-0.5f,0.5f,0.0f},
        {-0.5f,-0.5f,0.0f},
        {-0.5f,-0.5f,0.0f},
        {0.5f,-0.5f,0.0f},
        {0.5f,0.5f,0.0f} };
    
        //窗口清除的颜色
        glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    }
    
    void Unit4Move::paintGL()
    {
        //清除颜色缓冲区
        glClear(GL_COLOR_BUFFER_BIT);
    
        //【给opengl设置矩阵】
        //当前矩阵为模型矩阵
        glMatrixMode(GL_MODELVIEW);
        //重置当前指定的矩阵为单位矩阵，恢复坐标系
        //OpenGL是状态机，会保存之前的状态
        glLoadIdentity();
        glOrtho(-5,5,-5,5,-15,15);
        glTranslatef(xOffset,yOffset,0);
        glRotatef(45,0,0,1);
    
        //填充颜色
        glColor3f(0.0f,0.5f,1.0f);
        //绘制三角(坐标范围默认为[-1,1])
        glBegin(GL_TRIANGLES);
        for(const QVector3D &vertex:vertexList){
            glVertex3f(vertex.x(),vertex.y(),vertex.z());
        }
        glEnd();
    
        //绘制文本
        QPainter painter(this);
        painter.setPen(QColor(255,255,255));
        painter.drawText(20,40,"点击获取焦点后，按方向键移动！");
    }
    
    void Unit4Move::resizeGL(int width, int height)
    {
        //视口，靠左下角缩放
        glViewport(0,0,width,height);
    }
    
    void Unit4Move::keyPressEvent(QKeyEvent *event)
    {   
        QOpenGLWidget::keyPressEvent(event);
        //按键按下，key值放入容器，如果是长按触发的repeat就不判断
        if(!event->isAutoRepeat())
            pressedKeys.insert(event->key());
        //判断是否运行，不然一直触发就一直不能timeout
        if(!updateTimer->isActive())
            updateTimer->start(100);
    }
    
    void Unit4Move::keyReleaseEvent(QKeyEvent *event)
    {
        QOpenGLWidget::keyReleaseEvent(event);
        //按键释放，从容器中移除，如果是长按触发的repeat就不判断
        if(!event->isAutoRepeat())
            pressedKeys.remove(event->key());
        if(pressedKeys.isEmpty()){
            updateTimer->stop();
        }
    }
    
    void Unit4Move::showEvent(QShowEvent *event)
    {
        QOpenGLWidget::showEvent(event);
        setFocus();
    }

## 3.QML 代码 ##

import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("GongJianBo")
    
        //存储当前按下的键值，使用ES6的集合类型
        property variant pressedKeys:new Set()
    
        Rectangle{
            id: item
            //anchors.centerIn: parent
            x:100
            y:100
            width: 100
            height: 100
            color: "green"
    
            focus: true
            //按键按下
            Keys.onPressed: {
                //键值放入set
                if(!event.isAutoRepeat){
                    pressedKeys.add(event.key)
                }
                if(!timer.running){
                    timer.start()
                }
            }
            //按键释放
            Keys.onReleased: {
                //键值弹出set
                if(!event.isAutoRepeat){
                    pressedKeys.delete(event.key)
                }
                if(pressedKeys.size<=0){
                    timer.stop()
                }
            }
        }
    
        Timer{
            id:timer
            repeat: true
            interval: 50
            onTriggered: {
                //console.log(pressedKeys.size)
                if(pressedKeys.size<=0){
                    timer.stop()
                    return
                }
    
                //遍历存储的键值，实现同时处理多个按键按下状态
                for(let key of pressedKeys)
                {
                    switch (key) {
                    case Qt.Key_Up:
                        item.y-=5;
                        break;
                    case Qt.Key_Down:
                        item.y+=5;
                        break;
                    case Qt.Key_Left:
                        item.x-=5;
                        break;
                    case Qt.Key_Right:
                        item.x+=5;
                        break;
                    default:
                        break;
                    }
                }
            }
        }
    }

[2020073000024735.gif]: /images/20230208/bc7c13266f9b4381b110ebc1081b9e52.png