I have a QTableView that is using a custom QStyledItemDelegate to render each row of the table. A stylesheet is setting the background color of the selected row on the TableView by doing the following:
QTableView::item::selected {
background-color: $highlight_color; //this parses to #FFFFFF
}
This works as it should, but under certain conditions I would like to adjust the alpha of the selected row's background by making it semi-transparent. I am doing this by overriding the paint() function of QStyledItemDelegate.
void CustomDelegate::paint(QPainter* painter,
const QStyleOptionViewItem& option,
const QModelIndex& index) const {
QColor color(option.palette.color(QPalette::Highlight));
if(isOpaque)
color.setAlphaF(0.5);
painter->fillRect(options.rect, QBrush(background_color));
}
This does change the color, but the color of QPalette::Highlight is not correct. Furthermore, I have tried all of the different palette color roles, and none of them reflect the background color set in the stylesheet. If I do the following, however, it works just fine (minus the opacity).
void CustomDelegate::paint(QPainter* painter,
const QStyleOptionViewItem& option,
const QModelIndex& index) const {
QStyledItemDelegate::paint(painter, options, index);
}
I have read that combining Qt Stylesheets and QPalette is not a good idea, but my only alternative is to have another variable in the stylesheet that reflects the opacity, and I would like to avoid that at all costs.
Related
Is there any way to customize focus rect size for QTreeView item? I have reviewed source code of paint() event of QStyledItemDelegate, and there is query for textRect inside them, but i not found the way to resize focus rect, it only paint a part of cell, containing text, i need to focus rect fill the entire cell rect. Any help?
cell focus rect example
The default selection highlight depends on the current app style. On Windows it's partial, which is how other Windows apps behave. With Fusion style (default on Linux) the selection highlight already covers the full item rectangle. Not sure on Mac.
Anyway, it's easily controlled with a style option which is set in the item delegate. All we need to do is set a flag, and luckily the style option init function is virtual. This is the same flag which is set by default for some styles. Try this item delegate:
class HighlightDelegate : public QStyledItemDelegate
{
public:
using QStyledItemDelegate::QStyledItemDelegate;
protected:
void initStyleOption(QStyleOptionViewItem *option, const QModelIndex &index) const override
{
QStyledItemDelegate::initStyleOption(option, index);
option->showDecorationSelected = true;
}
};
I want to change the color of the text in a QLabel dynamically.
I have defined the color and style of the QLabel in the ui file and I want to change it when a certain event takes place.
I want to change the color without changing any other style of my QLabel.
I have found several answers adressing the issue of changing text color in a QLabel (1, 2, 3) and they all use the function setStyleSheet. This function works fine but it changes my font size and other styles related to the QLabel.
I have seen that the problem is related to setStyleSheet ignoring any previous style. The solution proposed there involves retrieving all the styles I want to maintain and setting them again together with the text color change.
This is cumbersome and difficult to maintain. If more styles were defined in the future I would need to review this part of the code to be able to reset all of them.
I would like to be able to change QLabel text color without altering any other syle. Is it possible?
If you want to manage the text color of QLabel you could wrap it with customized class.
For example:
class ColorLabel : public QLabel
{
public:
ColorLabel(const QString &text, QWidget *parent = nullptr)
: QLabel(text, parent)
{
setAutoFillBackground(true);
}
void setTextColor(const QColor &color)
{
QPalette palette = this->palette();
palette.setColor(this->backgroundRole(), color);
palette.setColor(this->foregroundRole(), color);
this->setPalette(palette);
}
};
And to use it in your code:
ColorLabel * poColorLabel = new ColorLabel("My string", this);
poColorLabel->setTextColor(Qt::red); // set label text in red color
FYI: I tested it on Fedora, Qt5.12 and it works fine.
A pragmatic approach:
Utilize the cascadingness of CSS.
Wrap your QLabel in a QWidget (don't forget a QLayout).
Set your default style on the surrounding QWidget.
Set the font color as the QLabel's only style.
You can create some style class to control a widget's style:
class WidgetStyleSheet
{
public:
// change some style's value
void setValue(const QString& styleKey, const QString& value)
{
_styleMap[styleKey] = value;
}
// to default state
void reset() {}
// form stylesheet
QString toStyleSheet() const
{
QString styleSheet;
QMapIterator<QString, QString> iter(_styleMap);
while( iter.hasNext() )
styleSheet += QString("%1: %2").arg(iter.key()).arg(iter.value());
return styleSheet;
}
private:
QMap<QString, QString> _styleMap;
}
Somewhere in your code:
WidgetStyleSheet labelSS;
// ...
labelSS.setValue("color", QString("%1").arg( QColor(255, 10, 0).name() );
labelSS.setValue("background-color", "...");
// ...
label->setStyleSheet(labelSS);
The following works fine. But it is not that elegant. This is in python. You have to pass the button name (or any other) to the following as is defined in the array
btns = ['self.hBeamBtn','self.lBeamBtn','self.allTestBtn','self.prnStatusBtn']
for btn in btns:
if str(btn_name) == str(btn):
styl = btn+'.setStyleSheet("font: bold;background-color: red;font-size: 12px;height: 28px;width: 80px;")'
eval(styl)
I subclassed a QTreeView and I have two columns where there are checkboxes. I would like to set two different images: one for the first column, and another one for the second column. I know I can change the image in the stylesheet with:
QTreeView::indicator:checked{
image: url(:/checked);
}
QTreeView::indicator:unchecked{
image: url(:/unchecked);
}
but it will change all the checkboxes in the tree view. Is there a way to do it with the stylesheets, or do I need to use a delegate?
Short answer: Stylesheets can't do that (as far as I know). They are a pretty immature feature in Qt, and there seems to be no development on them either.
What you can do:
Stylesheets
You cannot assign properties to a column or an item and you cannot access the columns by index.
But you can use some of the pseudo-states selectors like :first, :middle and :last:
QTreeView::indicator:first:checked{
background: red;
}
QTreeView::indicator:middle:checked{
background: blue;
}
QTreeView::indicator:unchecked{
background: lightgray;
}
I used colors instead of images for the sake of simplicity.
Note however, that these pseudo-states are actual currently visible states, so if the user is allowed to reorder columns, the style of the column might change. For example if the user drags one of the :middlecolumns and drops it at the end, the box will not be blue anymore.
DecorationRole
You can fake it using Qt::DecorationRole.
To do so, you have to receive the mousePressEvent either by subclassing QTreeView or by installing an event filter. You can then change the icon (via Qt::DecorationRole + emit dataChanged()) when the user clicks in the area of the icon.
This does not work with the keyboard of course.
Custom ItemDelegate
Subclass QStyledItemDelegate and override paint(), just as you suggested.
Custom Style
If you are creating a heavily styled application, you probably have to create a custom Style sooner or later. Stylesheets just don't support some features.
To do so, subclass QProxyStyle, override drawPrimitive and handle the drawing if QStyle::PE_IndicatorViewItemCheck is passed. You will also receive a QStyleOptionViewItem of which has some useful properties like checkState, features (contains QStyleOptionViewItem::HasCheckIndicator if there is a checkbox), and of course index so you can determine what kind of checkbox you want to draw.
Edit: Appendix
Example Using a Custom QStyledItemDelegate
void MyItemDelegate::paint(QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index) const
{
QStyledItemDelegate::paint(painter, option, index);
QStyleOptionViewItem opt = option;
initStyleOption(&opt, index);
const QWidget *widget = option.widget;
QStyle *style = widget ? widget->style() : QApplication::style();
QRect checkRect = style->subElementRect(QStyle::SE_ItemViewItemCheckIndicator, &opt, widget);
drawCheckBox(painter, checkRect, opt.checkState, index);
}
void MyItemDelegate::drawCheckBox(QPainter * painter, const QRect & checkRect, Qt::CheckState checkState, const QModelIndex & index) const
{
if (checkState == Qt::Checked)
{
switch (index.column())
{
case 0:
painter->fillRect(checkRect, Qt::red);
break;
default:
painter->fillRect(checkRect, Qt::blue);
}
}
else
{
painter->fillRect(checkRect, Qt::lightGray);
}
}
This example is quick and easy. Simply paint over the checkbox drawn by QStyledItemDelegate. Requires you to fill the whole box however, otherwise the original will be visible.
You can try to use QStyledItemDelegate to draw anything but the checkbox, and draw the checkbox afterwards, but that is a little harder and will leave you with some minor drawing artifacts if you don't want to spend too much time on it.
Example Using a Custom QProxyStyle
void MyStyle::drawPrimitive(PrimitiveElement pe, const QStyleOption * opt, QPainter * p, const QWidget * w) const
{
if (pe == QStyle::PE_IndicatorViewItemCheck)
{
const QStyleOptionViewItem * o = static_cast<const QStyleOptionViewItem *>(opt);
drawCheckBox(p, opt->rect, o->checkState, o->index);
return;
}
QProxyStyle::drawPrimitive(pe, opt, p, w);
}
The drawCheckBox() function is the same as in the first example.
As you can see, this way is much simpler, cleaner and has none of the drawbacks. You can apply the style globally, or only for a single widget.
I am using a QTableView with QAbstractTableModel.
I have subclassed QAbstractTableModel and in my model class for Qt::BackgroundRole and Qt::ForegroundRole I have returned some color depending on some condition.
And I have subclassed QTableView class.
When I select any row/cell on the table, the row/cell is highlighted in the default color of the tabelVeiw, it does not show the color returned from my model class.
How can I change this behavior? How can I avoid/ignore this default coloring of QTableView and have only the colors returned by my model class?
You have to use a custom delegate.
Subclass the QStyledItemDelegate and implement it's paint() method like this:
void MyDelegate::paint(QPainter* painter, const QStyleOptionViewItem & option, const QModelIndex & index) const
{
QStyleOptionViewItem itemOption(option);
initStyleOption(&itemOption, index);
if ((itemOption.state & QStyle::State_Selected) &&
(itemOption.state & QStyle::State_Active))
itemOption.palette.setColor(QPalette::Highlight, Qt::red); // set your color here
QApplication::style()->drawControl(QStyle::CE_ItemViewItem, &itemOption, painter, nullptr);
}
If you want to get yout selecion color from the model, I suggest to define a special custom role for that purpose:
enum MyRoles
{
HighlightColorRole = Qt::UserRole
};
Your model will use this role to return your custom highlight (selection) color through the QAbstractItemModel::data() method.
In your delegate you can obtain that color like this:
QColor color = index.data(HighlightColorRole).value<QColor>();
If you want to change the the color of the QTableview when a cell is selected you can do something like this :
QPalette palette = tableview->palette();
palette.setColor(QPalette::Highlight, QColor(255,255,255,100)); //set your own colors and transparency level in QColor
tableview->setPalette(palette);
I have a QTabWidget with a background gradient and two problems.
How dow I remove the anoying outline around the active tab (see image)? I tried "outline: none" like with push buttons but it does not seem to have an effect.
How do I style disabled tabs? I tried :disabled and :!enabled but both do not work. // Edit: This works with :disabled but not with all properties. Seems like I tried the only not supported.
The qt documentation was no help. Google either. :-(
It seems that the focus rectangle is handled by the QStyle (not to be confused with style sheets) that is in use. You can write a QStyle subclass and apply that to your to your QTabWidget. The subclass should override the drawControl() method and do nothing if it is currently drawing the focus rectangle.
The subclass would look something like this:
NoFocusRectStyle.h
#ifndef NOFOCUSRECTSTYLE_H
#define NOFOCUSRECTSTYLE_H
#include <QWindowsVistaStyle> // or the QStyle subclass of your choice
class NoFocusRectStyle : public QWindowsVistaStyle
{
public:
NoFocusRectStyle();
protected:
void drawControl(ControlElement element, const QStyleOption *option,
QPainter *painter, const QWidget *widget = 0) const;
};
#endif // NOFOCUSRECTSTYLE_H
NoFocusRectStyle.cpp
#include "NoFocusStyle.h"
NoFocusRectStyle::NoFocusRectStyle()
{
}
void NoFocusRectStyle::drawControl(ControlElement element,
const QStyleOption *option, QPainter *painter,
const QWidget *widget) const
{
if(element == CE_FocusFrame)
return;
QWindowsVistaStyle::drawControl(element, option, painter, widget);
}
Somewhere in your form's intializer/constructor you would apply the custom style subclass to the tab widget:
ui->tabWidget->setStyle(new NoFocusRectStyle());
This should allow your style sheets to continue to work.
It would be nice if there was an easier way to do this but I couldn't find one :)
This thread is old but maybe this would help people.
If you don't need to use the focus, then you can just set it through your tab widget:
ui->tabWidget->setFocusPolicy(Qt::NoFocus);
Focus rectangle could be removed by adding snippet below to your style:
QWidget {
outline: 0;
}
It is not related directly to style of QTabWidget but works as you expect.