Related
I would like to highlight (by defining a custom css) some items (QListWidgetItem) of a QListWidgetItem.
Since QListWidgetItem do not inherit from QWidget, there is no setProperty method which would have allowed me to define a css class.
What would an approach to this?
You can inherit from QStyledItemDelegate class and reimplement paint method, for example:
Custom delegate class .H:
#include <QStyledItemDelegate>
#include <QPainter>
class SomeItemDelegate : public QStyledItemDelegate
{
Q_OBJECT
public:
explicit SomeItemDelegate(QObject *parent = 0){}
~SomeItemDelegate(){}
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
signals:
public slots:
};
Custom delegate class .CPP:
void SomeItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
bool isSelected = option.state & QStyle::State_Selected;
bool isHovered = option.state & QStyle::State_MouseOver;
bool hasFocus = option.state & QStyle::State_HasFocus;
if(index.data(Qt::UserRole) == "custom") {
if(isHovered)
painter->fillRect(option.rect, QColor(0,184,255,40));
if(isSelected)
painter->fillRect(option.rect, QColor(0,184,255,20));
if(!hasFocus)
painter->fillRect(option.rect, QColor(144,222,255,5));
}
painter->save();
painter->setRenderHint(QPainter::Antialiasing, true);
painter->drawText(option.rect, Qt::AlignLeft, index.data().toString());
painter->restore();
}
Some yours QListWidget logic:
QListWidget *listW = new QListWidget(this);
QListWidgetItem *item = new QListWidgetItem(tr("Custom Text"));
item->setData(Qt::UserRole, "custom");
QListWidgetItem *item2 = new QListWidgetItem(tr("Simple Text"));
listW->addItem(item);
listW->addItem(item2);
SomeItemDelegate *del = new SomeItemDelegate();
listW->setItemDelegate(del);
NetworkPageForm::NetworkPageForm(QWidget *parent) :
QWidget(parent),
ui(new Ui::NetworkPageForm),
devicesModel(NULL)
{
ui->setupUi(this);
devicesModel = new QStandardItemModel(0, 4, parent);
devicesModel->setHeaderData(0, Qt::Horizontal, QObject::tr("IP"));
devicesModel->setHeaderData(1, Qt::Horizontal, QObject::tr("Name"));
devicesModel->setHeaderData(2, Qt::Horizontal, QObject::tr("Last Online"));
devicesModel->setHeaderData(3, Qt::Horizontal, QObject::tr("Status"));
ui->devicesTableView->setModel(devicesModel);
ui->devicesTableView->resizeColumnsToContents();
}
void NetworkPageForm::addDevice(const QString &ip, int device_type) {
bool haveSameItem = false;
for(int i=0; i<devicesModel->rowCount(); i++) {
QStandardItem * ipItem = devicesModel->item(i, 0);
QStandardItem * nameItem = devicesModel->item(i, 1);
if(QString::compare(ipItem->text(), ip)== 0 && QString::compare(nameItem->text(), deviceStr)==0) {
devicesModel->setData(devicesModel->index(i, 2), BaseModel::now());
haveSameItem = true;
}
}
if(!haveSameItem)
{
int last = devicesModel->rowCount();
devicesModel->insertRow(last);
devicesModel->setData(devicesModel->index(last, 0), ip);
devicesModel->setData(devicesModel->index(last, 1), device_type);
devicesModel->setData(devicesModel->index(last, 2), BaseModel::now());
devicesModel->setData(devicesModel->index(last, 3), QIcon(":/res/images/online_icon.png"), Qt::DecorationRole);
// This function does not work, the icon is algin left.
// devicesModel->item(last, 3)->setTextAlignment(Qt::AlignCenter);
}
ui->devicesTableView->resizeColumnsToContents();
}
Is there a way to set QIcon item center in QTableView?
Update:
I create my own QStyledItemDelegate sub class as #RazrFalcon answered.
#include <QStyledItemDelegate>
class MyDelegate : public QStyledItemDelegate
{
Q_OBJECT
public:
MyDelegate(QWidget *parent = 0) : QStyledItemDelegate(parent) {}
void paint(QPainter *painter, const QStyleOptionViewItem &option,
const QModelIndex &index) const;
QSize sizeHint(const QStyleOptionViewItem &option,
const QModelIndex &index) const;
void setModelData(QWidget *editor, QAbstractItemModel *model,
const QModelIndex &index) const;
private slots:
};
void MyDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const {
if(index.column() == 3) {
// TODO
} else {
QStyledItemDelegate::paint(painter, option, index);
}
}
QSize MyDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const {
if(index.column() == 3) {
// TODO
} else {
return QStyledItemDelegate::sizeHint(option, index);
}
}
void MyDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const {
QStyledItemDelegate::setModelData(editor, model, index);
}
And set ui->devicesTableView->setItemDelegate(new MyDelegate);
Could someone help me how to set icon column center in QTableView?
There is no default way. You should implement your own QStyledItemDelegate.
UPD: example added
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
Q_ASSERT(index.isValid());
QStyleOptionViewItemV4 opt = option;
initStyleOption(&opt, index);
// disable default icon
opt.icon = QIcon();
// draw default item
QApplication::style()->drawControl(QStyle::CE_ItemViewItem, &opt, painter, 0);
const QRect r = option.rect;
// get pixmap
QIcon icon = qvariant_cast<QIcon>(index.data(Qt::DecorationRole));
QPixmap pix = icon.pixmap(r.size());
// draw pixmap at center of item
const QPoint p = QPoint((r.width() - pix.width())/2, (r.height() - pix.height())/2);
painter->drawPixmap(r.topLeft() + p, pix);
}
It's no need to do it in delegate. The delegate will make your style sheet unavailable.
You can paint the icon in the middle of a rectangle pixmap which is as same size as the cell, and return it in the QAbstractItemModel::data() function with Qt::DecorationRole. Like this:
Qt::DecoratoinRole:
QPixmap pixmap(w, h); //w=cell width, h=cell
pixmap.fill(Qt::transparent); // draw a transparent rectangle
QPixmap iconPixmap(":/xx.png");
QPainter painter(&pixmap);
//Calculate the center coordinate x,y for iconPixmap
painter.draw(x, y, iconWidth, iconHeight, iconPixmap);
return pixmap;
I have derived a class from QStyledItemDelegate. I am using a QComboBox in this delegate. This delegate is used in QTableView.
My question is, how can i change the index of the Combobox in the delegate programatically i.e how to access the pointer to that widget outside the delegate class ?
I have checked that CreateEditor, SetEditorData, SetModelData functions (of QStyledItemDelegate) are called automatically when we click on the combobox and we cannot call them manually to maniplate the data in the model.
afaik any time you start editing and the combobox is shown, it will allocate a new one. if you want to have a permanent combobox, you should look at
QTableView::setIndexWidget(const QModelIndex&, QWidget*)
so you could access the combobox with the following code:
const QMoodelIndex idx = model->index(row, column);
QWidget* wid = view->indexWidget(idx);
QComboBox* box = qobject_cast<QComboBox*>(wid);
if (box)
// do your thing
You can have the contents of your combobox as a class member of your delegate in a QStringList. Your item delegate can be like :
#include <QStyledItemDelegate>
#include <QComboBox>
class ComboBoxDelegate: public QStyledItemDelegate
{
Q_OBJECT
public:
ComboBoxDelegate(QObject *parent = 0);
QWidget *createEditor( QWidget *parent,
const QStyleOptionViewItem &option,
const QModelIndex &index ) const;
void setEditorData( QWidget *editor,
const QModelIndex &index ) const;
void setModelData( QWidget *editor,
QAbstractItemModel *model,
const QModelIndex &index ) const;
void updateEditorGeometry( QWidget *editor,
const QStyleOptionViewItem &option,
const QModelIndex &index ) const;
QStringList comboItems;
mutable QComboBox *combo;
private slots:
void setData(int val);
};
ComboBoxDelegate::ComboBoxDelegate(QObject *parent ):QStyledItemDelegate(parent)
{
}
QWidget *ComboBoxDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
combo = new QComboBox( parent );
QObject::connect(combo,SIGNAL(currentIndexChanged(int)),this,SLOT(setData(int)));
combo->addItems(comboItems);
combo->setMaxVisibleItems(comboItems.count());
return combo;
}
void ComboBoxDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const
{
QString text = index.model()->data( index, Qt::DisplayRole ).toString();
int comboIndex = comboItems.indexOf(QRegExp(text));
if(comboIndex>=0)
(static_cast<QComboBox*>( editor ))->setCurrentIndex(comboIndex);
}
void ComboBoxDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const
{
model->setData( index, static_cast<QComboBox*>( editor )->currentText() );
}
void ComboBoxDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
editor->setGeometry( option.rect );
}
void ComboBoxDelegate::setData(int val)
{
emit commitData(combo);
//emit closeEditor(combo);
}
When you want to update the items in combobox somewhere in your code just get a pointer to the item delegate by calling itemDelegateForColumn and access the comboItems member :
ComboBoxDelegate * itemDelegate = qobject_cast<ComboBoxDelegate *>(ui->tableView->itemDelegateForColumn(columnIndex));
//Updating combobox items
itemDelegate->comboItems.append("newItem");
...
I created a delegate pretty much copied from Qt's Spin Box Delegate Example and I'm trying to fill a QTableView. However, I'm getting a strange problem where the table headers show up but the cells are empty and cannot be clicked on.
Code for the delegate:
#include "double_spinbox_delegate.h"
DoubleSpinBoxDelegate::DoubleSpinBoxDelegate(QObject *parent) : QItemDelegate(parent){}
QWidget *DoubleSpinBoxDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const{
QDoubleSpinBox *editor = new QDoubleSpinBox(parent);
editor->setValue(0);
// if (index.column() == 0){
// editor->setMinimum(0);
// editor->setMaximum(255);
// }
// else{
// editor->setMinimum(0);
// editor->setMaximum(1);
// }
return editor;
}
void DoubleSpinBoxDelegate::setEditorData(QWidget *editor, const QModelIndex &index) const{
double value = index.model()->data(index, Qt::EditRole).toDouble();
QDoubleSpinBox *doubleSpinBox = static_cast<QDoubleSpinBox*>(editor);
doubleSpinBox->setValue(value);
}
void DoubleSpinBoxDelegate::setModelData(QWidget *editor, QAbstractItemModel *model, const QModelIndex &index) const{
QDoubleSpinBox *doubleSpinBox = static_cast<QDoubleSpinBox*>(editor);
doubleSpinBox->interpretText();
double value = doubleSpinBox->value();
model->setData(index, value, Qt::EditRole);
}
void DoubleSpinBoxDelegate::updateEditorGeometry(QWidget *editor, const QStyleOptionViewItem &option, const QModelIndex &index) const{
editor->setGeometry(option.rect);
}
and the function I'm calling in the form constructor
void MainWindow::InitializeColorTable(){
QTableView *tableColor = ui->tableColor;
QStandardItemModel *model = new QStandardItemModel(4, 4, ui->tableColor);
// QStandardItemModel *model = this->colorTableModel;
tableColor->setModel(model);
DoubleSpinBoxDelegate delegate;
tableColor->setItemDelegate(&delegate);
model->setHorizontalHeaderLabels(QStringList() << tr("Value") << tr("R") << tr("G") << tr("B"));
for (int row = 0; row < model->rowCount(); ++row){
for (int col = 0; col < model->columnCount(); ++col){
QModelIndex index = model->index(row, col, QModelIndex());
model->setData(index, QVariant((row + 1.0) * (col + 1.0)), Qt::EditRole);
}
}
}
Your delegate is allocated on the stack, and it is deleted after it goes out of scope.
DoubleSpinBoxDelegate delegate;
tableColor->setItemDelegate(&delegate);
create your delegate with new instead.
I'm doing an implementation of a CheckBox that inherits from QitemDelegate, to put it into a QTableView.
the problem is that I get when inserted flush left and I need it centered.
As I understand the method that is responsible for the Paint. I have it written as follows:
void CheckBoxDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
bool checkValue;
QStyleOptionButton BtnStyle;
BtnStyle.state = QStyle::State_Enabled;
if(index.model()->data(index, Qt::DisplayRole).toBool() == true)
{
BtnStyle.state |= QStyle::State_On;
checkValue = true;
}else{
BtnStyle.state |= QStyle::State_Off;
checkValue = false;
}
BtnStyle.direction = QApplication::layoutDirection();
BtnStyle.rect = option.rect;
QApplication::style()->drawControl(QStyle::CE_CheckBox,&BtnStyle,painter );
QApplication::style()->drawControl(QStyle::CE_CheckBox,&BtnStyle,painter );
}
what is missing to appear centered?
so I have the delegated:
.h
class BooleanWidget : public QWidget
{
Q_OBJECT
QCheckBox * checkBox;
public:
BooleanWidget(QWidget * parent = 0)
{
checkBox = new QCheckBox(this);
QHBoxLayout * layout = new QHBoxLayout(this);
layout->addWidget(checkBox,0, Qt::AlignCenter);
}
bool isChecked(){return checkBox->isChecked();}
void setChecked(bool value){checkBox->setChecked(value);}
};
class CheckBoxDelegate : public QItemDelegate
{
Q_OBJECT
private:
BooleanWidget *checkbox;
public:
CheckBoxDelegate(QObject *parent);
~CheckBoxDelegate();
void setEditorData( QWidget *editor,const QModelIndex &index )const;
void setModelData( QWidget *editor,QAbstractItemModel *model,const QModelIndex &index )const;
QWidget *createEditor( QWidget *parent,const QStyleOptionViewItem &/* option */,const QModelIndex &/* index */ )const;
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
public slots:
void changed( bool );
};
.cpp
void CheckBoxDelegate::changed( bool value )
{
BooleanWidget *checkbox = static_cast<BooleanWidget*>( sender() );
emit commitData( checkbox );
emit closeEditor( checkbox );
}
QWidget *CheckBoxDelegate::createEditor( QWidget *parent,const QStyleOptionViewItem &/* option */,const QModelIndex &/* index */ ) const
{
BooleanWidget *editor = new BooleanWidget( parent );
connect( editor, SIGNAL( toggled ( bool ) ), this, SLOT( changed( bool ) ) );
return editor;
}
void CheckBoxDelegate::setEditorData( QWidget *editor,const QModelIndex &index ) const
{
int value = index.model()->data(index, Qt::DisplayRole).toInt();
BooleanWidget *checkbox = static_cast<BooleanWidget*>(editor);
if(value == 1)
{
checkbox->setChecked(true);
}
else
{
checkbox->setChecked(false);
}
}
void CheckBoxDelegate::setModelData( QWidget *editor,QAbstractItemModel *model,const QModelIndex &index ) const
{
BooleanWidget *checkBox = qobject_cast<BooleanWidget*>( editor );
Qt::CheckState value;
if(checkBox->isChecked())
value = Qt::Checked;
else
value = Qt::Unchecked;
model->setData( index, value, Qt::DisplayRole);
}
void CheckBoxDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
drawCheck(painter, option, option.rect, index.data().toBool() ? Qt::Checked : Qt::Unchecked);
drawFocus(painter, option, option.rect);
}
If you are extending the QItemDelegate class, it has a drawCheck() function, what will draw you a nince, centered checkbox. You can use it in the paint() function.
Edit:
Here is an example, assuming you have a class called BooleanEditor, what inherits from QItemDelegate:
void BooleanEditor::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
drawCheck(painter, option, option.rect, index.data().toBool() ? Qt::Checked : Qt::Unchecked);
drawFocus(painter, option, option.rect);
}
For keeping the checkbox centered when entering the edit mode, you can do something like this:
class BooleanWidget : public QWidget
{
Q_OBJECT
QCheckBox * checkBox;
public:
BooleanWidget(QWidget * parent = 0)
{
checkBox = new QCheckBox(this);
QHBoxLayout * layout = new QHBoxLayout(this);
layout->addWidget(checkBox,0, Qt::AlignCenter);
}
bool isChecked(){return checkBox->isChecked();}
void setChecked(bool value){checkBox->setChecked(value);}
};
And in your ItemDelegates createEditor() method return an instance of this BooleanWidget class. In your setModelData() and setEditorData() you can now cast your input widget to this BooleanWidget:
BooleanWidget * widget = qobject_cast<BooleanWidget*>(editor);
and then use the is/setChecked method.
I solve this problem with the following item delegate:
booleanitemdelegate.h
#ifndef BOOLEANITEMDELEGATE_H
#define BOOLEANITEMDELEGATE_H
#include <QItemDelegate>
class BooleanItemDelegate : public QItemDelegate
{
public:
BooleanItemDelegate(QObject *parent);
public:
void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;public:
bool editorEvent(QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option, const QModelIndex &index);
};
#endif // BOOLEANITEMDELEGATE_H
booleanitemdelegate.cpp
#include "booleanitemdelegate.h"
BooleanItemDelegate::BooleanItemDelegate(QObject *parent):
QItemDelegate(parent)
{
}
void BooleanItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
drawCheck(painter, option, option.rect, index.data().toBool() ? Qt::Checked : Qt::Unchecked);
drawFocus(painter, option, option.rect);
}
bool BooleanItemDelegate::editorEvent(QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option, const QModelIndex &index)
{
if(event->type() == QEvent::MouseButtonRelease){
model->setData(index, !model->data(index).toBool());
event->accept();
}
return QItemDelegate::editorEvent(event, model, option, index);
}
I hope, I can help.
that's what I did to center-allign the editor control:
QWidget *checkBoxDelegate::createEditor(QWidget *parent, const QStyleOptionViewItem &option, const QModelIndex &index) const {
QCheckBox *editor = new QCheckBox(parent);
editor->setTristate(allowTriState); //my class' variable
// this does the trick :)
editor->setStyleSheet("QCheckBox {margin-left: 43%; margin-right: 57%;}");
// this should do it better
// editor->setStyleSheet("QCheckBox {margin-left: auto; margin-right: auto;}");
// but in my case the checkbox is slightly to the left of original
return editor;
}
solved the problem as follows:
believes that inherits from the itemDelegate QStyledItemDelegate and reimplemented methods "paint" and "editorEvent".
In the method "editorEvent" emit a signal that indicates which row was selected.
Here is the code
class ItemDelegate : public QStyledItemDelegate
{
Q_OBJECT
signals:
void clickSignal(int);
public:
ItemDelegate(QObject *parent = 0)
: QStyledItemDelegate(parent)
{
}
void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const
{
QStyleOptionViewItemV4 viewItemOption(option);
if (index.column() == 0) {
const int textMargin = QApplication::style()->pixelMetric(QStyle::PM_FocusFrameHMargin) + 1;
QRect newRect = QStyle::alignedRect(option.direction, Qt::AlignCenter,
QSize(option.decorationSize.width() + 5,option.decorationSize.height()),
QRect(option.rect.x() + textMargin, option.rect.y(),
option.rect.width() - (2 * textMargin), option.rect.height()));
viewItemOption.rect = newRect;
}
QStyledItemDelegate::paint(painter, viewItemOption, index);
}
virtual bool editorEvent(QEvent *event, QAbstractItemModel *model, const QStyleOptionViewItem &option,
const QModelIndex &index)
{
Q_ASSERT(event);
Q_ASSERT(model);
// make sure that the item is checkable
Qt::ItemFlags flags = model->flags(index);
if (!(flags & Qt::ItemIsUserCheckable) || !(flags & Qt::ItemIsEnabled))
return false;
// make sure that we have a check state
QVariant value = index.data(Qt::CheckStateRole);
if (!value.isValid())
return false;
// make sure that we have the right event type
if (event->type() == QEvent::MouseButtonRelease) {
const int textMargin = QApplication::style()->pixelMetric(QStyle::PM_FocusFrameHMargin) + 1;
QRect checkRect = QStyle::alignedRect(option.direction, Qt::AlignCenter,
option.decorationSize,
QRect(option.rect.x() + (2 * textMargin), option.rect.y(),
option.rect.width() - (2 * textMargin),
option.rect.height()));
} else {
return false;
}
Qt::CheckState state = (static_cast<Qt::CheckState>(value.toInt()) == Qt::Checked
? Qt::Unchecked : Qt::Checked);
emit(clickSignal(index.row()));
return model->setData(index, state, Qt::CheckStateRole);
}
};
the class where I have a connect QTableView do this:
connect(check,SIGNAL(clickSignal(int)),this,SLOT(CheckMark(int))); //check the itemDelegate
performed the operation with the check that were marked
Without too much fussing instead of directly setting rect:
BtnStyle.rect = option.rect;
Construct a new QRect and move x coordinate to the right as much as you like:
QRect r = option.rect;
QRect r1(r.x() + 34, r.y(), r.width(), r.height());
BtnStyle.rect = r1;
The solution in Python to center checkbox and allow user check/uncheck here