Hello,
I am trying to customize the look of my application using stylesheets, which has proven to be rather challenging given my loathing of CSS. I would very much appreciate if someone with more experience could help me shed some light on this.
I have a QListView and I want to have a hovering effect for its items. In the constructor of the widget that contains that QListView (in this case, called groupListView), I do this:
ui
->groupsListView
->setObjectName
(QString("GroupsListView"));
ui
->groupsListView
->setStyleSheet
(QString("QListView#GroupsListView::item:hover { background: #000000; }"));
ui->groupsListView->setObjectName(QString("GroupsListView"));
ui->groupsListView->setStyleSheet(QString("QListView#GroupsListView::item:hover { background: #000000; }"));
To copy to clipboard, switch view to plain text mode
Now, the QListView has an item delegate, which builds and displays a custom widget. The paint event of the custom widget looks like this:
opt.init(this);
style
()->drawPrimitive
(QStyle::PE_Widget,
&opt,
&painter,
this);
painter.
setRenderHint(QPainter::Antialiasing,
true);
QPainter painter(this);
QStyleOption opt;
opt.init(this);
style()->drawPrimitive(QStyle::PE_Widget, &opt, &painter, this);
painter.setRenderHint(QPainter::Antialiasing, true);
To copy to clipboard, switch view to plain text mode
However, when I hover my mouse over the custom widget, nothing happens.
Is that because I have a custom widget? I can't style anything in the item itself.
If so, is there anything special I should pay attention to in the custom widget code? I have also tried to achieve this from the custom widgets' stylesheet, by setting the widget's stylesheet to something like this:
color: #ffffff;
border: 1px solid black;
border-radius: 3px;
padding: 1px;
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #bec1d2,
stop: 0.4 #717990,
stop: 0.5 #5c637d,
stop:1 #68778e);
}
:hover{
color: #ffffff;
border: 1px solid black;
border-radius: 3px;
padding: 1px;
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #ced1e2,
stop: 0.4 #8189a0,
stop: 0.5 #6c738d,
stop:1 #78879e);
}
QWidget#GroupMeterListWidget {
color: #ffffff;
border: 1px solid black;
border-radius: 3px;
padding: 1px;
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #bec1d2,
stop: 0.4 #717990,
stop: 0.5 #5c637d,
stop:1 #68778e);
}
:hover{
color: #ffffff;
border: 1px solid black;
border-radius: 3px;
padding: 1px;
background: qlineargradient(
x1:0, y1:0, x2:0, y2:1,
stop:0 #ced1e2,
stop: 0.4 #8189a0,
stop: 0.5 #6c738d,
stop:1 #78879e);
}
To copy to clipboard, switch view to plain text mode
(please ignore the horribly-looking colors, I just tried to make them noticeable).
This actually works in Qt Designer, but if I try to set it in code, in the constructor of the custom widget, the first part works fine, but -- again -- when I hover over the widget, nothing happens. It seems like they would not trigger the hover event -- for the sake of it, I tried to override enterEvent and leaveEvent and they did not seem to fire.
I dug through the Qt docs for some indication about this but I haven't been able to find anything relevant. Can anyone give me a quick idea about where to look?
Thanks!
Edit: I just noticed it slipped my mind -- I am using Qt version 4.7.4 on a Linux machine with gcc 4.5.1. It's from the official Fedora 14 repositories, if it's of any importance, but I have access at pretty much any version (this one is on one of my work computers which it would appear I have been rather lazy to maintain
).
Bookmarks