1，简介
为了最佳体验，一个拖拽行排序的功能研究了几个小时。效果参考的QQ好友分组的排序。
网上查了下好像没有人发布QT版类似的代码，于是自己动手
QQ好友分组排序效果：
2，效果
这是最终效果图，有小伙伴说看起来很流畅，事实确实是很流畅的。
3，思路
拖拽：就是QT的一套拖拽功能的类，QDrag、QMimeData，和几个鼠标事件和拖拽响应事件：
protected:
//根据鼠标事件开启拖拽
void mousePressEvent ( QMouseEvent * event ) ;
void mouseMoveEvent(QMouseEvent *event);
//拖拽响应事件
void dragEnterEvent(QDragEnterEvent *event);
void dragMoveEvent(QDragMoveEvent *event);
void dropEvent(QDropEvent *event);
拖拽时的位置指示线：其实就是个高度为2的QLabel，设边框颜色就是该线的颜色。
主要类：一个继承自QTableView的类 MyTableView
MyTableView.h:
#ifndef MYTABLEVIEW_H
#define MYTABLEVIEW_H
#include <QTableView>
#include <QLabel>
#include <QMouseEvent>
#include <QStandardItemModel>
class MyTableView : public QTableView
{
Q_OBJECT
public:
MyTableView(QWidget *parent = Q_NULLPTR);
//此函数包装了自带的setModel，只是记录了model指针方便内部调用
void SetModel(QStandardItemModel *model);
signals:
//拖拽结束后会发出此信号，可绑定槽函数实现你的其他功能，比如把新的顺序存到文件
void sigRowChange(int from, int to);
protected:
//根据鼠标事件开启拖拽
void mousePressEvent ( QMouseEvent * event ) ;
void mouseMoveEvent(QMouseEvent *event);
//拖拽响应事件
void dragEnterEvent(QDragEnterEvent *event);
void dragMoveEvent(QDragMoveEvent *event);
void dropEvent(QDropEvent *event);
private:
void DoDrag(); //执行拖拽
void ResetOrder(); //重置第一列序号
void MoveRow(int from, int to); //真正执行移动行的功能
private:
QStandardItemModel *mModel;
QLabel* mLabel; //高度设为2，用做指示线
int mRowHeight; //表格的行高
bool mValidPress; //在鼠标移动时，判断之前按下时是否是在有效行上
int mRowFrom; //拖动起始行
int mRowTo; //拖动时(还没松开时)鼠标位置代表的行，会绘制一条指示线，类似QQ好友列表拖拽效果
QString mDragText; //拖拽过程中跟随鼠标显示的内容
QPoint mDragPoint; //拖拽起点
QPoint mDragPointAtItem; //记录按下时鼠标相对该行的位置，在拖动过程中保持该相对位置
};
#endif // MYTABLEVIEW_H
MyTableView.cpp:
#include "MyTableView.h"
#include <QApplication>
#include <QDrag>
#include <QMimeData>
#include <QPainter>
#include <QHeaderView>
MyTableView::MyTableView(QWidget *parent)
: QTableView(parent)
{
setAcceptDrops(true);
mLabel = new QLabel(this);
mLabel->setFixedHeight(2);
mLabel->setGeometry(1, 0, width(), 2);
mLabel->setStyleSheet("border: 1px solid #8B7500;");
mLabel->hide();
mModel = NULL;
mRowHeight = 30;
mValidPress = false;
mRowFrom = 0;
mRowTo = 0;
}
void MyTableView::SetModel(QStandardItemModel *model)
{
mModel = model;
QTableView::setModel(model);
}
void MyTableView::mousePressEvent(QMouseEvent *e)
{
if (e->button() == Qt::LeftButton)
{
QModelIndex index = indexAt(e->pos());
if (index.isValid())
{
mValidPress = true;
mDragPoint = e->pos();
mDragText = mModel->item(index.row(),1)->text();
mDragPointAtItem = mDragPoint - QPoint(0,index.row()*mRowHeight);
mRowFrom = index.row();
}
}
QTableView::mousePressEvent(e);
}
void MyTableView::mouseMoveEvent ( QMouseEvent * e )
{
if (!mValidPress)
{
return;
}
if (!(e->buttons() & Qt::LeftButton))
return;
if ((e->pos() - mDragPoint).manhattanLength() < QApplication::startDragDistance())
return;
mLabel->show();
DoDrag(); //开始拖拽，完成拖拽后才会继续往下走
mLabel->hide();
mValidPress = false;
}
void MyTableView::dragEnterEvent ( QDragEnterEvent * e )
{
if (e->mimeData()->hasText())
{
e->acceptProposedAction();
}
else
{
e->ignore();
QTableView::dragEnterEvent(e);
}
}
void MyTableView::dragMoveEvent ( QDragMoveEvent * e )
{
if(e->mimeData()->hasText())
{
int nCurRow = 0;
QModelIndex index = indexAt(e->pos());
if (index.isValid())
{
if(e->pos().y() - index.row()*mRowHeight >= mRowHeight/2)
{
nCurRow = index.row() + 1;
}
else
{
nCurRow = index.row();
}
}
else
{
nCurRow = mModel->rowCount();
}
// if (nCurRow != mRowFrom)
{
mRowTo = nCurRow;
mLabel->setGeometry(1, mRowTo*mRowHeight, width() - 2, 2);
}
e->acceptProposedAction();
return;
}
e->ignore();
QTableView::dragMoveEvent(e);
}
void MyTableView::dropEvent ( QDropEvent * e )
{
if(e->mimeData()->hasText())
{
if (mRowTo != mRowFrom)
{
MoveRow(mRowFrom, mRowTo);
}
e->acceptProposedAction();
return;
}
e->ignore();
QTableView::dropEvent(e);
}
void MyTableView::DoDrag()
{
QDrag *drag = new QDrag(this);
QMimeData *mimeData = new QMimeData;
mimeData->setText(mDragText);
drag->setMimeData(mimeData);
// 设置拖拽图片
QPixmap drag_img(width(), mRowHeight);
drag_img.fill(QColor(255,255,255,100));
QPainter painter(&drag_img);
painter.setPen(QColor(0, 0, 0, 200));
painter.drawText(QRectF(40,0,width(),mRowHeight), mDragText, QTextOption(Qt::AlignVCenter));
drag->setPixmap(drag_img);
drag->setHotSpot(mDragPointAtItem);
//***注意：此句会阻塞，进入drag的拖拽消息循环，会依次触发dragEnterEvent、dragMoveEvent、dropEvent消息
if (drag->exec(Qt::MoveAction) == Qt::MoveAction)
{
// 确认移动操作
}
}
void MyTableView::ResetOrder()
{
for (int i = 0; i < mModel->rowCount(); i++)
{
mModel->item(i, 0)->setText( QString::number(i + 1) );
}
}
void MyTableView::MoveRow(int from, int to)
{
if (from == to)
{
return;
}
QStandardItem * item = mModel->item(from, 1);
if (item)
{
QString strText = item->text();
QList<QStandardItem*> items;
QStandardItem* item0 = new QStandardItem("");
QStandardItem* item1 = new QStandardItem(strText);
items.append(item0);
items.append(item1);
item0->setTextAlignment(Qt::AlignCenter);
//移动行思路：就是先在要移动到的位置新建同样内容的行，然后删除被移动的行
mModel->insertRow(to, items);
if (from < to)
{
mModel->removeRow(from);
selectRow(to-1);
}
else
{
mModel->removeRow(from+1);
selectRow(to);
}
ResetOrder();
emit sigRowChange(mRowFrom,mRowTo);
}
}
在MainWindow上放一个QTableView然后提升为该MyTableView，MainWindow里做些初始化：
MainWindow.cpp:
#include "MyTableView.h"
#include "mainwindow.h"
#include "ui_mainwindow.h"
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
InitTable();
}
MainWindow::~MainWindow()
{
delete ui;
}
void MainWindow::InitTable()
{
MyTableView* t = ui->tableView;
//设置各种属性
t->horizontalHeader()->hide(); //隐藏列头(带列头的情况需要修改代码，重新计算高度偏移)
t->verticalHeader()->hide(); //隐藏行头
t->verticalHeader()->setDefaultSectionSize(30); //默认列高度
t->horizontalHeader()->setStretchLastSection(true); //最后一列自适应宽度
t->setEditTriggers(QTableView::NoEditTriggers); //不能编辑
t->setSelectionBehavior(QTableView::SelectRows); //一次选中整行
t->setSelectionMode(QTableView::SingleSelection); //单行选中
t->setAlternatingRowColors(true); //行间隔色
t->setShowGrid(false); //去掉网格线
t->setFocusPolicy(Qt::NoFocus); //去掉item选中时虚线框
//添加数据
QStandardItemModel* model = new QStandardItemModel();
model->setHorizontalHeaderItem(0, new QStandardItem(QStringLiteral("序号")));
model->setHorizontalHeaderItem(1, new QStandardItem(QStringLiteral("内容")));
QStringList strs;
strs<<"111"<<"222"<<"333"<<"444"<<"AAA"<<"BBB"<<"CCC"<<"DDD";
for(int i=0;i<strs.size();i++)
{
model->setItem(i, 0, new QStandardItem(QString::number(i+1)));
model->setItem(i, 1, new QStandardItem(strs[i]));
model->item(i, 0)->setTextAlignment(Qt::AlignCenter);
}
t->SetModel(model);
//设置样式
t->setStyleSheet("QTableView {border: 1px solid gray;background: #E8E8E8;}\
QTableView::item{color:black;}\
QTableView::item:selected{color:black;background: #63B8FF;}");
t->setColumnWidth(0,40);
t->selectRow(0);
}
4，源码下载
本专栏配套源码，都可在Qt学习群免费下载：
群号码：1149411109
群名称：Qt实战派学习群
