clicked does not work when mousePressEvent and mouseReleaseEvent are overriden - qt

So I want to add some styles to my button. So I've created a class that derives from QPushButton. I have overriden mousePressEvent and mouseReleaseEvent functions. So far so good. Everything works as expected and buttons change color when pressed and released.
The problem comes When in my MainWindow I try to implement on_button_clicked(). It just wouldn't work.
I have experimented a bit with event->accept and event->ignore. that did not work.
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
}
void MainWindow::on_characters_clicked()
{
qDebug("Hello");
}
void Button::mousePressEvent(QMouseEvent* event)
{
setStyleSheet(defaultStyle + "Background-color: gray;");
}
void Button::mouseReleaseEvent(QMouseEvent* event) {
setStyleSheet(defaultStyle + "Background-color: darkgray; border: 1px solid gray; color: white;");
}
I want my button to have both styles on press and release and functionality. I can write an observer class and solve this, but I feel like there has to be an easier solution.

When you override a method you are modifying the behavior of the class, in this case the clicked signal is issued in mouseReleaseEvent, but mouseReleaseEvent is only invoked if mousePressEvent accepts the event, but when modifying code you have eliminated it. The solution is to call the implementation of the parent.
void Button::mousePressEvent(QMouseEvent* event)
{
setStyleSheet(defaultStyle + "Background-color: gray;");
QPushButton::mousePressEvent(event);
}
void Button::mouseReleaseEvent(QMouseEvent* event) {
setStyleSheet(defaultStyle + "Background-color: darkgray; border: 1px solid gray; color: white;");
QPushButton::mouseReleaseEvent(event);
}
On the other hand I do not see any need to override the mousePressEvent methods since the Qt Style Sheet supports the pseudo-states:
setStyleSheet(R"(
Button{
// default styles
background-color: darkgray;
border: 1px solid gray;
color: white;
}
Button::presed{
// default styles
background-color: gray;
}
)");

Related

Define multiple styles for pushbutton control Qt Widgets stylesheets

How can I define multiple styles for one kind of control in one stylesheet? So later developer can select, what kind of style control should looks like.
For example, I need to define two styles for QPushButton: for normal button (on the left) and for action button (on the right)
For the first button I wrote the following style:
QPushButton {
background-color: #DCDCDC;
border: 1px solid #BEBEBE;
}
...
And this would apply to all QPushButtons in the project. Next I need to define another action style for QPushButtons also, but which should be selected by developer. How can I do this?
I expect something like this:
QPushButton#ActionButton* {
background-color: blue;
border: 1px solid darkerblue;
}
And then if developer will specify objectName of his button starting with "ActionButton" (example "ActionButtonSendRespond") then it will use the second style.
You can subclass QPushButton into ActionButton so you can write specific CSS :
C++
#include <QPushButton>
class ActionButton : public QPushButton
{
Q_OBJECT
public:
using QPushButton::QPushButton;
};
CSS :
QPushButton {
background-color: #DCDCDC;
border: 1px solid #BEBEBE;
}
ActionButton {
background-color: blue;
border: 1px solid darkerblue;
}
Then when developers use one class or the other, they know which style will apply. And it can be useful if you also need to change the behaviour in the subclass.

QRadioButton color change on Selected and deselected Qt

i am trying to change the color of radiobutton on selected and deselected as
QtStylesheet :Qt Stylesheet
but In this link it only refer to Loading a Image but how could I change it color and without loading Image and change border color or styling radiobutton
the requirement is attached in the Image :
Read documentation carefully. It describes all you need. It even almost described your case, the only difference is images instead of colours.
Style sheet for your case is like this:
QRadioButton {
background-color: gray;
color: white;
}
QRadioButton::indicator {
width: 10px;
height: 10px;
border-radius: 7px;
}
QRadioButton::indicator:checked {
background-color: red;
border: 2px solid white;
}
QRadioButton::indicator:unchecked {
background-color: black;
border: 2px solid white;
}
Setting style sheet to next works for me:
QRadioButton:checked{
background-color: red;
}
QRadioButton:unchecked{
background-color: black;
}
Setting style sheet to QRadioButton::indicator:checked doesn't work, because this only changes the settings of the indicator.
If you want to change the background color of your radiobutton when he's selected you should use both slots and stylesheet.
I will name your button MyButton.
In your .h you will find :
private :
QRadioButton MyButton;
private slots:
void changeColorMyButton();
and in your .cpp add in the setup of your Mainwindow :
QObject::connect(MyButton,SIGNAL(clicked(bool)),this,SLOT(changeColorMyButton));
Your button is now connected to the signal clicked and when you will click on your button, the slot changeColorMyButton will be executed. You can now customize your slot.
void Mainwindow::changeColorMyButton()
{
if(this.MyButton.isChecked())
{
this.MyButton->setStyleSheet("background-color: black");
}
else
{
this.MyButton->setStyleSheet("background-color: yellow");
}
}

Color tag not working on QPushButtons

I am in the process of styling buttons in my user interface, using the UI designer in QT Creator 3.0.1 (with QT 4.8). I am trying to have these buttons behave more like links on a website--without borders, and responding to mouse hovers. Here is the stylesheet I am currently using:
QPushButton {
border: none;
color: #a8a8a8;
}
QPushButton:hover {
color: #ffffff;
}
I thought it was pretty straightforward, but for some reason the color tag is not functioning on hovers. To test, I tried changing the button in other ways, such as changing the background color, and that worked flawlessly.
I also tried changing the selectors to something more specific, by including an ancestor (QWidget QPushButton:hover) and by using the ID (QPushButton#templateButton), but neither have worked.
Is this a problem with the color tag, or am I missing something obvious?
It is also possible to use QLabel to create clickable links. Create custom class ClickableLabel which inherits QLabel and handles mousePressEvents
class ClickableLabel : public QLabel
{
Q_OBJECT
public:
explicit ClickableLabel(QWidget *parent = 0);
signals:
void clicked();
protected:
void mousePressEvent(QMouseEvent * event) ;
};
And
void ClickableLabel::mousePressEvent(QMouseEvent * event)
{
Q_UNUSED(event);
emit clicked();
}
It is also probably possible to handle mouse hover events and change style of the label based on them. However, I have not tested it.
This solution has been copied from somewhere but I do not remember anymore the original source.
Try this :
#templateButton {
border: 0px;
color: #a8a8a8;
text-decoration: underline;
text-align: right;
}
#templateButton:hover {
color: #FFFFFF;
}
#Anthony Hilyard I show you some pictures so I post another answer here.
1.normal
2.hover
#pushButtonForgetPassword {
border: none;
color: #0066ff;
text-decoration: underline;
text-align: right;
}
#pushButtonForgetPassword:hover {
color: #FFFFFF;
}
pushButtonForgetPassword would be the ID of my link button

Changing QCheckBox indicator rectangle color

I'm trying to change only the color of QCheckBox indicator rectangle.
Currently I succeed to draw the right and the bottom line of the rectangle.
Probably I'm doing something wrong here.
Here is my code:
CheckBoxWidget.cpp
CheckBoxWidget::CheckBoxWidget(QObject *poParent)
: QItemDelegate(poParent)
{
}
void CheckBoxWidget::drawCheck( QPainter *painter,
const QStyleOptionViewItem &option,
const QRect & rect,
Qt::CheckState state) const
{
QRect oCheckBoxRect =
QApplication::style()->subElementRect( QStyle::SE_CheckBoxIndicator, &option);
painter->setPen(Qt::white);
painter->drawRect(oCheckBoxRect);
QItemDelegate::drawCheck(painter, option, oCheckBoxRect, state);
}
CheckBoxWidget.h
class CheckBoxWidget : public QItemDelegate
{
Q_OBJECT
public:
CheckBoxWidget(QObject *poParent = 0);
virtual ~CheckBoxWidget();
protected:
virtual void drawCheck( QPainter *painter,
const QStyleOptionViewItem &option,
const QRect &,
Qt::CheckState state) const;
};
Any suggestions ?
There is no need to create a custom delegate for this. You could use stylesheets in order to change the color of the checkbox or any othe widget as you wish. The following stylesheet will set a gray 3px border to the checkbox rectangle.
QCheckBox::indicator {
border: 3px solid #5A5A5A;
background: none;
}
In order to set the stylesheet you could either use the Qt Designer or the setStylesheet function.
In order to set a specific color all of the following are valid:
border: 3px solid #5A5A5A;
border: 3px solid red;
border: 3px solid rgb(255, 120, 100);
border: 3px solid rgba(255,120,100, 50); // For alpha transparency
The simplest way I have been able to figure out is use a QApplication color palette to help change the checkbox indicator color. This makes it so you don't have to override the entire checkbox widget with all the states with QStyle.
This is the type of code that did what I needed
QPalette newPallete = myWidget->palette();
newPallete.setColor(QPalette::Active, QPalette::Background, myWidget->palette().text())
myWidget->setPalette(newPallete)
See this other example with something very similar to styling buttons:
Qt5 - setting background color to QPushButton and QCheckBox
My solution to this problem was to change the border-color of QCheckBox::indicator and then fix the disappearing tick mark by making the background-color of QCheckBox::indicator:checked act as the visual replacement of the tick mark.
checkBox.setStyleSheet("\
QCheckBox::indicator { border: 1px solid; border-color: yellow; }\
QCheckBox::indicator:checked { background-color: green; }\
");
More QCheckBox::indicator:<state>'s can be found here.
The solution of #pnezis has the issue that the tick isn't shown anymore.
I fixed this by creating a custom widget, in which I put a QCheckBox (without a label) and a QLabel next to each other.
Then, on the QCheckBox, I call
checkBox.setStyleSheet('background-color: rgba(255, 90, 90, 0.7);')
which changes the colour of the QCheckBox but still displays the tick.

How to stylize custom classes in Qt using external style sheets?

I have the following codes for my application-
file headerArea.cpp
void MainWindow::createDocks(){
//TOP DOCK OR TITLEBAR
titleBar = new headerArea();
addDockWidget(Qt::TopDockWidgetArea,titleBar);
}
void headerArea::paintEvent (QPaintEvent *){
QStyleOption opt;
opt.init (this);
QPainter p (this);
style ()->drawPrimitive (QStyle::PE_Widget, &opt, &p, this);
}
and in my style sheet-
headerArea#titleBar{
background: #ccc;
}
The style sheet doesn't seem to work on my application. It doesn't even work for-
headerArea{
background: #ccc;
}
But it works fine when I apply the style to the parent class QDockWidget which the class headerArea inherits from-
QDockWidget{
background: #ccc;
}
I'd really appreciate any kind of help.
Thanks!
You should call headerArea's base class paintEvent() in headerArea::paintEvent.
I didn't used your QDockWidget, but how I write style for my qss file is, for exmpale QToolButton
QToolButton {
text-transform: uppercase;
font-family:"Trebuchet MS", sans-serif ;
font-size:1.0em;
color:#fff;
border: 1px solid #000;
background:qlineargradient(spread:pad,x1:0,y1:0,x2:0,y2:1,stop:0 #565656, stop:1 #000);
}
QToolButton:checked {
border: 1px outset #424242;
background:qlineargradient(spread:pad,x1:1,y1:1,x2:1,y2:0,stop:0 #424242, stop:1 #6e6e6e);
}
QToolButton#buttonNameOne:disabled{
background-color: #d5d5d5;
color: #6ba722;
}
And you can set the style sheet path as setStyleSheet(stylesheetpath+'#buttonNameOne').
Hope this help you

Resources