Qt编写可拖拽的自定义控件
一直想做一个像卡牌游戏一样的，可以拖动卡片，实现改变位置，顺序交换的效果，今天我们一起来尝试一下。
1.先绘制一个基于QWidget的控件
类名为Card
h文件
#ifndef CARD_H
#define CARD_H
#include 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 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;
}
运行后的效果：
2.用QMouseEvent实现控件可拖动
首先要实现控件拖动，需要有2个要素，1：要拖动的控件对象，2：控件的初始位置
card[8]是以数组形式一次性加载到界面的，鼠标点击时我们并不知道当前点击的对象。我们可以在Card类中做修改，使点击时通知主界面它是谁。
card.h
#ifndef CARD_H
#define CARD_H
#include 我们新增了mousePressEvent和一个信号sendSelf，信号将自己本身的地址发送出去
card.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);
}
void Card::mousePressEvent(QMouseEvent *event)
{
Q_UNUSED(event);
emit sendSelf(this);
}
到widget.h中设置相应的槽函数
private slots:
void getObject(Card *w);
接收到对象后，我们接下来要对其进行操作，改变位置只需要用move()函数即可，我们要实时显示出移动的过程，因此需要在mouseMoveEvent中做处理，重写mouseMoveEvent函数：
protected:
void mouseMoveEvent(QMouseEvent *event) override;
还需要声明一个Card成员变量，来临时存储getObject中获得的对象地址，声明一个开始移动时鼠标指针位置startP，一个卡片本身的位置yuanP。
private:
Ui::Widget *ui;
Card *temp;
QPoint startP;
QPoint yuanP;
实现getObject函数和mouseMoveEvent函数
widget.cpp
void Widget::getObject(Card *w)
{
temp = w;
startP = cursor().pos()-this->pos();
yuanP = temp->pos();
}
void Widget::mouseMoveEvent(QMouseEvent *event)
{
temp->move(yuanP.x()+event->x()-startP.x(),yuanP.y()+event->y()-startP.y());
}
运行后，可以成功拖动卡片了！
但是我们又发现了一个问题，当卡片重叠时，我们点击重叠部分无法确定选中的是哪张卡片，因此我们制定一个规则，最近移动的卡片总是处于最上层。我们可以在mouseReleaseEvent中做处理：
void Widget::mouseReleaseEvent(QMouseEvent *event)
{
temp->raise();
}
到这一步，我们已经实现了可自由拖拽改变位置的控件。
3.接下来实现拖拽交换卡片位置的功能
这里我制定了一个规则，拖拽某张卡片时，若此时的鼠标指针进入了另一张卡片范围，则进行交换。
整体思路是这样的：
在widget中的mouseMoveEvent中做处理：当鼠标移动时，给Card发送信号，由Card的槽函数中做判断，指针是否进入了自身范围if(this->geometry().contains(pos))，如果进入了，就向widget发送信号，避免重复发送信号，增加一个开关量，widget收到反馈信号后就关闭。为了避免拖拽的Card本身触发进入范围的判断，在widget的getObject槽函数中先关闭了当前Card的连接。
为了能看清是否交换位置了，我们给card增加了标号显示。
完成后的代码：
card.h
#ifndef CARD_H
#define CARD_H
#include card.cpp
#include "card.h"
#include widget.h
#ifndef WIDGET_H
#define WIDGET_H
#include widget.cpp
#include "widget.h"
#include "ui_widget.h"
#include 到这一步就已经基本实现我们最初想要的功能了，接下来可以再移动过程中加点动画效果，把widget也封装起来，可以自定义设置卡片数量，卡片尺寸等
完整代码链接：Qt自定义可拖拽控件
03.01更新：增加的动画效果
利用QPropertyAnimation实现卡片的动画移动效果
card.h
#ifndef CARD_H
#define CARD_H
#include card.cpp
void Card::moveTo(QRect r)
{
QPropertyAnimation *animation = new QPropertyAnimation(this,"geometry");
connect(animation,&QPropertyAnimation::finished,this,&Card::reset);
animation->setDuration(300);
animation->setStartValue(this->geometry());
animation->setEndValue(r);
animation->start();
}
void Card::getPos(QPoint p)
{
if(isDragging && this->geometry().contains(p)){
isDragging=false;
qDebug()<<"enter"<<txt;
emit sendNeedChange(this);
}
}
void Card::reset()
{
isDragging = true;
}