QTableWidget中表格显示图片

QTableWidget中的表格显示图片有几种方式：

需要先将图片加载为资源。

1.直接在创建QTableWidgetItem的时候创建,如

tableWdiget->setItem(0,1,new QTableWidgetItem(QIcon(":/image/cpu")," "));

2.通过在item中创建一个label，通过label的setPixMap函数来显示图片：

QLabel *label = new QLabel("");

label->setPixmap(QPixmap(":/image/grid").scaled(30,30));

ui->matrixViewTable->setCellWidget(0,i,label);

3.通过继承 QStyledItemDelegate类使用委托来实现item中显示图片:

class QPixmapItemdele : public QStyledItemDelegate

{

public:

QPixmapItemdele(QObject* parent = 0):QStyledItemDelegate(parent){ }

//在委托类的paint中画图

virtual void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const

{

if(index.data(Qt::DisplayRole).canConvert<QPixmap>())

{

QPixmap pix = index.data(Qt::DisplayRole).value<QPixmap>();

painter->drawPixmap(option.rect,pix);

}

QStyledItemDelegate::paint(painter,option,index);

}

};

然后为tablewidget设置委托，后面就可以设置具体的某项的图片：

ui->matrixViewTable->setItemDelegate(new QPixmapItemdele());

//以下是设置第一行的所有列的图片

for(int i=0; i<ui->matrixViewTable->columnCount(); i++)

{ 

QTableWidgetItem *item = new QTableWidgetItem();

ui->matrixViewTable->setItem(0,i,item);

item->setData(Qt::DisplayRole,QVariant::fromValue<QPixmap>(QPixmap(":/image/grid").scaled(30,30)));

}

以上三种方法，法一直接在item上创建Icon，则表中每个Item表示为左边icon，右边为icon对应的text，即使text为空，也会留出很大的空间出来，导致左边的icon很小，

可以用以下语句来设置左边图标大小:

ui->matrixViewTable->setIconSize(QSize(30,30));

但是右边还是有text留出来的空间，如果想让icon充满整个item，则此方法没法达成。

法二通过item中创建label来setPixMap的方式可以让icon充满整个item，但是显示出来的icon用鼠标点击不会有选择动作发生，或者也许可以处理点击事件(未
4000
试过，不知是否能行)。

法三继承委托能够让图片充满整个item，同时选择图片时，会出现选择框，不至于像法二一样点击了没有任何反应。

以下是法三QWidgetTable使用委托的代码(委托类已在上面给出)：

ui->matrixViewTable->setItemDelegate(new QPixmapItemdele());

int colcount = 17;

int rowcount = 2;

ui->matrixViewTable->setColumnCount(colcount);

ui->matrixViewTable->setRowCount(rowcount);

ui->matrixViewTable->horizontalHeader()->setVisible(false);

ui->matrixViewTable->verticalHeader()->setVisible(false);

ui->matrixViewTable->setSelectionMode(ui->matrixViewTable->NoSelection);

ui->matrixViewTable->setEditTriggers(ui->matrixViewTable->SelectedClicked);

ui->matrixViewTable->setShowGrid(false);

ui->matrixViewTable->setFrameShape(QFrame::NoFrame);

const int width = 30;

for(int i=0; i<ui->matrixViewTable->columnCount(); i++)

{ 

ui->matrixViewTable->setColumnWidth(i,width);

//设置第8列为间隔行，不允许点击或选择

if(i==8)

{

QTableWidgetItem *itm1 = new QTableWidgetItem();

ui->matrixViewTable->setItem(0,i,itm1);

itm1->setFlags(Qt::NoItemFlags);

QTableWidgetItem *itm2 = new QTableWidgetItem();

ui->matrixViewTable->setItem(1,i,itm2);

itm2->setFlags(Qt::NoItemFlags);

continue;

}

QTableWidgetItem *item = new QTableWidgetItem();

ui->matrixViewTable->setItem(0,i,item);

item->setData(Qt::DisplayRole,QVariant::fromValue<QPixmap>(QPixmap(":/image/grid").scaled(30,30)));

QTableWidgetItem *item2 = new QTableWidgetItem();

ui->matrixViewTable->setItem(1,i,item2);

item2->setData(Qt::DisplayRole,QVariant::fromValue<QPixmap>(QPixmap(":/image/grid").scaled(30,30)));

}

ui->matrixViewTable->setColumnWidth(8,15);

以下是运行生成的效果，每个表格中间是一个图片：



使用委托能够在表格中显示图片，但是如果要在表格中画图，比如画线，则使用委托画出来的图会把线覆盖掉，也就是线会有画出来，但是看不到，实际是画了在图的下面。

在表格中显示图片还有第4种方法，安装事件过滤器，然后在过滤器函数EventFilter()函数中进行画图。因为此处用到的QTableWidget是Widget中的一个控件，因此可以安装事件过滤器，让Widget监视QTableWidget中的事件。代码如下，在类中重写QWidget类的eventFilter函数，然后创建表格时，每一列就创建为空，在evenFilter函数中检测到paint事件时才进行将图片画到表格中。

class MatrixView : public QWidget

{

Q_OBJECT

public:

explicit MatrixView(QWidget *parent = 0);

~MatrixView();

public:

bool eventFilter(QObject *, QEvent *);

private:

void InitTableWidget();

bool IsMouseInTableWidget(QEvent *event, QPoint &p);

void SetPointToCenter(QPoint&);

private:

Ui::MatrixView *ui;

QPoint m_beginP;

QPoint m_endP;

bool m_bmove;

bool m_brelease;

};

//以下是在构造函数中创建表格，表格其他部分与上面代码一样

m_bmove = false;

m_brelease = false;

//必须是tablewidget的viewport注册事件过滤才会有鼠标事件，如果是tablewidget注册，则收到除了鼠标事件外的其他事件，也就是鼠标事件收不到

ui->matrixViewTable->viewport()->installEventFilter(this);

for(int i=0; i<ui->matrixViewTable->columnCount(); i++)

{ 

ui->matrixViewTable->setColumnWidth(i,COL_WIDTH);

//设置第8列为间隔行，不允许点击或选择

if(i == NULL_COL)

{

QTableWidgetItem *itm1 = new QTableWidgetItem();

ui->matrixViewTable->setItem(0,i,itm1);

itm1->setFlags(Qt::NoItemFlags);

QTableWidgetItem *itm2 = new QTableWidgetItem();

ui->matrixViewTable->setItem(1,i,itm2);

itm2->setFlags(Qt::NoItemFlags);

continue;

}

QTableWidgetItem *item = new QTableWidgetItem();

ui->matrixViewTable->setItem(0,i,item);

//使用委托显示图片

//item->setData(Qt::DisplayRole,QVariant::fromValue<QPixmap>(QPixmap(pixmap).scaled(30,30)));

QTableWidgetItem *item2 = new QTableWidgetItem();

ui->matrixViewTable->setItem(1,i,item2);

//item2->setData(Qt::DisplayRole,QVariant::fromValue<QPixmap>(QPixmap(pixmap).scaled(30,30)));

}

//在eventFilter中获取tablewidget的鼠标按下、移动，释放事件，进行画线，在画线之前进行画图。此处画图的效果与法三的效果一样，且可以在图上面画线。如果不需要处理鼠标事件，此处可以忽略3个鼠标事件的判断。

bool MatrixView::eventFilter(QObject *object, QEvent *event)

{

//   qDebug("%s type:%d",object->objectName().toStdString().c_str(),event->type());

if(object->objectName()!=QString("qt_scrollarea_viewport"))

{

return QWidget::eventFilter(object,event);

}

if(event->type() == QEvent::MouseButtonPress)

{

if(IsMouseInTableWidget(event,m_beginP))

{

m_endP = m_beginP;

update();

}

}

if(event->type() == QEvent::MouseButtonRelease)

{

IsMouseInTableWidget(event,m_endP);

m_brelease = true;

SetPointToCenter(m_endP);

update();

}

if(event->type() == QEvent::MouseMove)

{

QMouseEvent *mouseEvent = static_cast<QMouseEvent*>(event);

//不进行判断左右键，如果判断左右键，会导致m_endP有时无值，画出的线断断续续

m_endP = mouseEvent->pos();

m_bmove = true;

update();

}

if(event->type() == QEvent::Paint)

{

QPainter paint(ui->matrixViewTable->viewport());

//使用paint事件在表格中画图

int w = COL_WIDTH;

int h = ui->matrixViewTable->rowHeight(0);

for(int i=0; i<ui->matrixViewTable->columnCount()-1; i++)

{

int x = i>=NULL_COL ? i*COL_WIDTH+NULL_COL_WIDTH : i*COL_WIDTH;

int y = 0;

int y1 = ui->matrixViewTable->rowHeight(0);

QPixmap pix(":/image/grid");

paint.drawPixmap(QRect(x,y,w,h),pix);

QPixmap pix1(":/image/grid");

paint.drawPixmap(QRect(x,y1,w,h),pix1);

}

//在表格中画线，线随鼠标动

if(m_bmove)

{

QPen pen(Qt::black,5);

paint.setPen(pen);

SetPointToCenter(m_beginP); //取得鼠标最接近项的中心点

paint.drawPoint(m_beginP);

QPen pen1(Qt::black,3);

paint.setPen(pen1);

paint.drawLine(m_beginP,m_endP);

QPen pen2(Qt::black,5);

paint.setPen(pen2);

paint.drawPoint(m_endP);

}

if(m_brelease)

{

m_bmove = false;

m_brelease = false;

}

}

//此处必须返回基类的eventFilter，以让基类有机会进行处理其他事情，否则单单返回true，Qtablewidget上面将无其他东西显示

return QWidget::eventFilter(object,event);

}

//判断鼠标按下的点是否在表格内，可无需关注

bool MatrixView::IsMouseInTableWidget(QEvent *event, QPoint &point)

{

if(event->type() == QEvent::MouseButtonPress  ||

event->type() == QEvent::MouseButtonRelease||

event->type() == QEvent::MouseMove)

{

QMouseEvent *mouseEvent = static_cast<QMouseEvent*>(event);

if(mouseEvent->button() == Qt::LeftButton)

{

QPoint p = mouseEvent->pos();

//检查鼠标位置是否点在列表的项中，需要考虑中间空白间隔的那列除外

int col = p.x()/COL_WIDTH>=NULL_COL ? (p.x()+NULL_COL_WIDTH)/COL_WIDTH : p.x()/COL_WIDTH;

int row = p.y()/ui->matrixViewTable->rowHeight(0);

if(col<ui->matrixViewTable->columnCount() && row<ui->matrixViewTable->rowCount())

{

if(col != NULL_COL)

{

point = p;

return true;

}

}

}

}

return false;

}

//取得最靠近该点的项的中心点，可无需关注

void MatrixView::SetPointToCenter(QPoint &point)

{

int x = 0;

if(point.x()/COL_WIDTH < NULL_COL)

{

x = point.x()/COL_WIDTH*COL_WIDTH + COL_WIDTH/2;

}

else

{

//因为第8列是空列，所以要排除这一列，先将point所在的x坐标减去8列前的部分，得到超出8列后的部分，就可以按照取中心点的方法取得这超出后部分的中心点，再加上8列前部分的位置，就得到最终的中心点

int null_col_end_x = NULL_COL*COL_WIDTH + NULL_COL_WIDTH;

x = null_col_end_x + (point.x()-null_col_end_x)/COL_WIDTH*COL_WIDTH + COL_WIDTH/2;

}

int h = ui->matrixViewTable->rowHeight(0);

int y = point.y()/h*h + h/2;

point = QPoint(x,y);

}

效果 图：(图中直线上的折线是抗锯齿，如果线宽小的话就不会这么明显)