I've set the stylesheet of a QWidget to change the borders and the background,
#gui {
border: 4px inset #515c84;
border-radius: 9px;
background-image: url(./back.png)
}
Its name is gui but neither border nor background are shown.
Override paintEvent in your QWidget subclass like this:
void MyWidget::paintEvent(QPaintEvent *e)
{
QStyleOption opt;
opt.init(this);
QStylePainter p(this);
p.drawPrimitive(QStyle::PE_Widget, opt);
}
For the Python-QT bindings (PyQt, PySide) just setting the attribute WA_StyledBackground on the QWidget is enough to show border and background.
Related
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;
}
)");
QPushButton {
border: 2px solid red;
height:24px;
width:100px;
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
which gives me rounded one side and flat on other side like this
I am looking to have a inward curve on one side and flat on other side like plano concave like this is there a way to achieve this
I think a better approach here is to subclass the QPushButton and reimplement the paintEvent. Something like this
void PushButton::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
// Define pen
QPen pen;
pen.setWidth(4);
// Draw outer cover
pen.setColor(Qt::black);
painter.setPen(pen);
painter.setBrush(QColor(Qt::gray));
painter.drawRect(this->rect());
// Draw Inward arc
pen.setWidth(2);
painter.setPen(pen);
painter.setBrush(QColor(Qt::white));
int x = this->rect().x() - this->rect().width()/2;
int y = this->rect().y();
int w = this->rect().width();
int h = this->rect().height();
QRectF rectangle(x,y,w,h);
painter.drawRoundedRect(rectangle,w,h);
}
Keep in mind this is just an example, you should take other things into considerations like the size of widget and how much angle should be the inward cure and everything else.
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
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.
I create a set of buttons using the function below with text, buttonName, that can change in width. The icon that appears when I click one of the buttons then justfies itself based on the width of the text; how do I make the icon stay the same margin from the right of the button regardless of text? Don't say custom delegate, because I haven't been able to figure out how to implement that!
QPushButton *LayoutCreator::createButton(const QString &buttonName) {
QIcon ico;
ico.addPixmap(QPixmap(":images/images/on.png"), QIcon::Normal, QIcon::On);
ico.addPixmap(QPixmap(":images/images/off.png"), QIcon::Normal, QIcon::Off);
QPushButton* button = new QPushButton(buttonName);
button->setStyleSheet("QPushButton { height: 70px; font-size: 20px; }");
button->setIcon(ico);
button->setLayoutDirection(Qt::RightToLeft);
button->setIconSize(QSize(32,32));
button->setCheckable(true);
return button;
}
Try adding
text-align: right;
to your button style sheet.