Qt编写可拖拽的自定义控件

原创

已于 2023-03-01 15:18:58 修改 · 4.8k 阅读

57 ·

CC 4.0 BY-SA版权

文章标签：

#qt #ui

于 2023-02-21 13:37:48 首次发布

本文介绍了如何使用Qt创建一个可拖动的卡片控件，并实现卡片之间的位置交换。通过QMouseEvent处理鼠标事件，实现实时拖动效果，同时在卡片重叠时确保最近移动的卡片始终在最上层。最后通过QPropertyAnimation添加动画效果，使卡片移动更平滑。

一直想做一个像卡牌游戏一样的，可以拖动卡片，实现改变位置，顺序交换的效果，今天我们一起来尝试一下。

1.先绘制一个基于QWidget的控件

类名为Card
h文件

#ifndef CARD_H
#define CARD_H

#include <QWidget>
#include <QPaintEvent>
#include <QPainter>
class Card : public QWidget
{
   
   
    Q_OBJECT
public:
    explicit Card(QWidget *parent = nullptr);
protected:
    void paintEvent(QPaintEvent *event) override;
};

#endif // CARD_H

cpp文件

#include "card.h"

Card::Card(QWidget *parent) : QWidget(parent)
{
   
   
    this->setGeometry(0,0,200,400);
}

void Card::paintEvent(QPaintEvent *event)
{
   
   
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.drawRoundedRect(QRectF(5,5,190,390),10,10);

}

我们完成了一个很简单的200*400的圆角卡片
在主界面中展示看看
widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include "card.h"
QT_BEGIN_NAMESPACE
namespace Ui {
   
    class Widget; }
QT_END_NAMESPACE

class Widget : public QWidget
{
   
   
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    Ui::Widget *ui;
    Card* cd[8];
};
#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
   
   
    ui->setupUi(this);
    for(int i=0;i<8;i++){
   
   
        cd[i] = new Card(this);
        connect(cd[i],&Card::sendSelf,this,&Widget::getObject);
        cd[i]->move(i%4*200,i/4*400);
    }
}

Widget::~Widget()
{
   
   
    delete ui;
}