Qt StyleSheet to programmatically createdQWidget - c++

I want to apply a stylesheet to a particular Qwidget that I create in the constructor of the parent QWidget. I don't want to create the QWidget in the Designer, but I want to create it dynamically.
This is my code
enum {one = 0,
two = 1,
three = 2};
cMainForm::cMainForm(QWidget *parent) : QWidget(parent), ui(new Ui::cMainForm) {
//...
QWidget* widgetTest[3];
widgetTest[one] = new QWidget(this);
widgetTest[one]->setGeometry(100,100,100,100);
widgetTest[one]->show();
widgetTest[one]->raise();
//...
setStyleSheet("QWidget#widgetTest[one]{"
"background-color: red;"
"}"
);
//...
}
And doesn't work.
If I change the styleSheet:
setStyleSheet("QWidget{"
"background-color: red;"
"}"
);
The stylesheet is applied to all the widgets. But I don't want this; I want to apply the stylesheet only to that particular widget.
Also if I don't use an array, it doesn't work.
QWidget* widgetTest;
widgetTest = new QWidget(this);
widgetTest->setGeometry(100,100,100,100);
widgetTest->show();
widgetTest->raise();
//...
setStyleSheet("QWidget#widgetTest{"
"background-color: red;"
"}"
);
I already searched the documentation.
What's the solution?

The selector you're using (#) refers to the widget objectName property, not the variable name (the style engine knows nothing about your variables). Give the widget an object name:
widgetTest->setObjectName("widgetTest");
then set the stylesheet:
widgetTest->setStyleSheet("QWidget#widgetTest { background-color: red }");

Related

How to create custom widget and use it in Qt Designer?

I extremely need to create my custom widget and use it inside QtDesigner ( promoting QWidget to my widget ). I have never done it before, and can't google anything useful. Widget i need to get is just square box with few QLabel and QLineEdit objects. For this moment i have the following code:
#include "customwidget01.h"
#include "qlabel.h"
#include "qlineedit.h"
#include "QGridLayout"
customWidget01::customWidget01(QWidget *parent) : QWidget(parent)
{
QString textSheets = "QLabel,QLineEdit {width:60;height:20;max-width:60;max-height:20;;min-width:60;min-height:20;}";
QString widgetSheet = "customWidget01 {width:200;height:200;max-width:200;max-height:200;;min-width:120;min-height:200;}";
this->setStyleSheet(widgetSheet + textSheets);
QLabel *label1= new QLabel(this);
label1->setText("1st arg");
QLabel *label2 = new QLabel(this);
label2->setText("2nd arg");
QLabel *label3= new QLabel(this);
label3->setText("3rd arg");
QLabel *label4= new QLabel(this);
label4->setText("4th arg");
QLineEdit *line1 = new QLineEdit(this);
line1->setPlaceholderText("enter 1st arg");
QLineEdit *line2 = new QLineEdit(this);
line2->setPlaceholderText("enter 2nd arg");
QLineEdit *line3 = new QLineEdit(this);
line3->setPlaceholderText("enter 3rd arg");
QLineEdit *line4 = new QLineEdit(this);
line4->setPlaceholderText("enter 4th arg");
QGridLayout *layout = new QGridLayout();
this->setLayout(layout);
layout->setVerticalSpacing(10);
layout->setHorizontalSpacing(10);
layout->addWidget(label1,0,0);
layout->addWidget(label2,1,0);
layout->addWidget(label3,2,0);
layout->addWidget(label4,3,0);
layout->addWidget(line1,0,1);
layout->addWidget(line2,1,1);
layout->addWidget(line3,2,1);
layout->addWidget(line4,3,1);
this->setVisible(true);
}
My problems are:
cant draw border around widget itself
vertical and horizontal spacings do not work
Used QtDesigner for GUI all the time - not really familiar with gui creation in plain code.
let me help you in order to get beautiful interface you need to learn CSS
I will show you how it works
that's what you have right now
This means that you do not correctly write the CSS code
QString textSheets = "QLabel,QLineEdit {width:60;height:20;max-width:60;max-height:20;;min-width:60;min-height:20;}";
QString widgetSheet = "customWidget01 {width:200;height:200;max-width:200;max-height:200;;min-width:120;min-height:200;}";
this->setStyleSheet(widgetSheet + textSheets); // does not work
I will exchange these lines for it
QString textSheets = "QLineEdit{ border-width: 2px; border-style: solid; border-color: red green black rgb(127,255,10); }"
"QLabel { border-width: 2px; border-style: solid; border-color: green black rgb(10,255,180) rgb(180,10,158); }" ;
setStyleSheet(textSheets);
and that's what result
to resize you just need to do so
//label1->setMinimumSize(150,50);
label1->setFixedSize(150,50);
//label1->setMaximumSize(150,50);
//label1->setMidLineWidth(150);
and that's what result
Add a QWidget in design mode.
Right click it and select Promote to... from the context menu.
Write the name (customWidget01) of your from QWidget derived class into Promoted class name.
Make sure the generated text in Header file is correct.
Click add.
Select it and click promote.

QTreeWidget with non-native scroll bar when background changed

I need a QTreeWidget with transparent background so it has the same color as the native light-gray window background. This works fine by setting the background to transparent.
The problem is that if I do this, the scroll becomes non-native looking. The default background of QTreeWidget is "white" and if I don't change it, the scroll bar does look native. However, if I change the background to "transparent", the scrollbar looses its native appearance.
To demonstrate this, I put two QTreeWidgets next to each other, one with the default white background showing the native scroll bar and one with the background changed to transparent, showing a non-native scroll bar: screenshot
Here is the code:
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow)
{
ui->setupUi(this);
QHBoxLayout* layout = new QHBoxLayout(this);
ui->centralWidget->setLayout(layout);
QTreeWidget* tree1 = new QTreeWidget();
QTreeWidget* tree2 = new QTreeWidget();
layout->addWidget(tree1);
layout->addWidget(tree2);
// add ten items to each tree widget
for(int i=0; i<10; i++){
QString item_text = "item " + QString::number(i);
QTreeWidgetItem* item1 = new QTreeWidgetItem();
item1->setText(0, item_text);
tree1->addTopLevelItem(item1);
QTreeWidgetItem* item2 = new QTreeWidgetItem();
item2->setText(0, item_text);
tree2->addTopLevelItem(item2);
}
// change the background color of tree2 to the window color
// this leads to a non native scroll bar for tree2
tree2->setStyleSheet("background-color: transparent;");
}
How can I have the transparent background an still keep the native scroll bar?
I finally found the solution. I need to restrict the definition of the background-color to the QTreeWidget:
tree2->setStyleSheet("QTreeWidget {background-color: transparent;}");

How to set a custom widget's background color and border width?

I have a custom widget whose parent is yet another custom widget. I am able to set the background color of the parent custom widget using QPalette and it works fine. But I am unable to set the child custom widget's border color using both QPalette and stylesheet.
This is how I set my parent custom widget's background color:
QPalette pal = parentCustomWidget->palette();
QColor color = {226, 208, 208};
pal.setColor (QPalette::Background, color);
parentCustomWidget->setAutoFillBackground (true);
parentCustomWidget->setPalette (pal);
parentCustomWidget->show();
I referred several SO posts/answers for setting background color to custom widget, but I am unable to set it. This is how I set my childCustomWidget's color:
Approach1:
QPalette pal = childCustomWidget->palette();
QColor color = {204, 231, 47};
pal.setColor (QPalette::Background, color);
childCustomWidget->setAutoFillBackground (true);
childCustomWidget->setPalette (pal);
Approach2:
childCustomWidget->setStyleSheet ("*{border-width:" +
BorderThickness +
";border-style:solid;border-color:" +
hexColorCode + " ;color:white;}");
Note: I have commented out the paintEvent virtual function.
I have gone through this link: How to Change the Background Color of QWidget and have incorporated changes like given but im unable to set color to childCustomWidget.
My custom widgets with the above approaches look like this:
Here orange is the parent's BG color which I am able to set. The grey colored one seems to be the default color for the child widget.
Solution
For Approach2 to work, i.e. for your custom widget to respect the stylesheet, the Qt::WA_StyledBackground attribute should be set to true, as it:
Indicates the widget should be drawn using a styled background.
Example
Here is a minimal example I have prepared for you in order to demonstrate a possible implementation of the suggested solution:
class ParentWidget : public QWidget
{
Q_OBJECT
public:
explicit ParentWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};
class ChildWidget : public QWidget
{
Q_OBJECT
public:
explicit ChildWidget(QWidget *parent = nullptr) : QWidget(parent) {}
};
class MainWindow : public QMainWindow
{
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0) :
QMainWindow(parent)
{
auto *pWidget = new ParentWidget(this);
auto *l = new QVBoxLayout(pWidget);
auto *cWidget = new ChildWidget(pWidget);
QString BorderThickness("2");
QString hexColorCode("#FF00FF");
l->addWidget(cWidget);
l->setContentsMargins(25, 25, 25, 25);
QPalette pal(pWidget->palette());
QColor color(226, 208, 208);
pal.setColor (QPalette::Background, color);
pWidget->setAutoFillBackground (true);
pWidget->setPalette (pal);
cWidget->setAttribute(Qt::WA_StyledBackground, true);
cWidget->setStyleSheet("ChildWidget { border: " + BorderThickness + " solid " +
hexColorCode + ";"
"background-color: rgb(204, 231, 47);"
"color: white; }");
setCentralWidget(pWidget);
resize (400, 400);
}
};
Result
As it is written, this example produces the following result:
Qt docs about palette: Warning: Do not use this function in conjunction with Qt Style Sheets. When using style sheets, the palette of a widget can be customized using the "color", "background-color", "selection-color", "selection-background-color" and "alternate-background-color".
http://doc.qt.io/qt-5/qwidget.html#palette-prop
Qt docs about autoFillBackground: Warning: Use this property with caution in conjunction with Qt Style Sheets. When a widget has a style sheet with a valid background or a border-image, this property is automatically disabled.
http://doc.qt.io/qt-5/qwidget.html#autoFillBackground-prop

QWidget's background applied to all its QWidget children

I chose to use Qt to manage the GUI of a project I am working on.
After finding how to apply a picture at the bottom of my QWidget, I noticed that it has an impact on all the components that are added to it.
Whatever the style applied through the setStyleSheet method or even with a QPixmap, the background of these elements is always the image defined for the QWidget container.
How can I avoid this behavior ?
Here is my code :
MainMenu::MainMenu(QWidget* Parent, const QPoint& Position, const QSize& Size) : QWidget(Parent) {
QString qwidgetStyle = "QWidget {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
QString buttonStyle = "color: rgba(73, 123, 176, 1); font-size:30px; background-color: rgba(73, 123, 176, 1);";
move(Position);
resize(Size);
setStyleSheet(qwidgetStyle);
// Menu title
QLabel *title = new QLabel(this);
title->setText("Menu");
title->setStyleSheet(buttonStyle);
title->setAlignment(Qt::AlignCenter);
// Menu buttons
// Play
buttonPlay = new QPushButton("Play");
(*buttonPlay).setEnabled(true);
(*buttonPlay).setStyleSheet(buttonStyle);
connect(buttonPlay, SIGNAL(clicked()), this, SLOT(handleButton()));
// Option
buttonOptions = new QPushButton("Options", this);
(*buttonOptions).setEnabled(true);
(*buttonOptions).setGeometry(250, 175, 100, 50);
(*buttonOptions).setStyleSheet(buttonStyle);
connect(buttonOptions, SIGNAL(clicked()), this, SLOT(handleButton()));
// Quit
buttonQuit = new QPushButton("Quit", this);
(*buttonQuit).setEnabled(true);
(*buttonQuit).setGeometry(250, 275, 100, 50);
(*buttonQuit).setStyleSheet(buttonStyle);
connect(buttonQuit, SIGNAL(clicked()), this, SLOT(handleButton()));
// Layout
QGridLayout *layout = new QGridLayout;
layout->setMargin(50);
layout->addWidget(title, 0, 0, 1, 5);
layout->addWidget(buttonPlay, 3, 1, 2, 3);
layout->addWidget(buttonOptions, 4, 1, 2, 3);
layout->addWidget(buttonQuit, 5, 1, 2, 3);
setLayout(layout);
show();
}
The behavior you encountered is perfectly normal, because of the following lines :
QString qwidgetStyle = "QWidget {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
...
setStyleSheet(qwidgetStyle);
Here, you just told Qt to apply qwidgetstyle to every QWidget of your application, with the keyword QWidget. That's why in Qt, you better set a name to your object if you want to apply a style to this particular object.
In your code, QLabel and QPushButton both inherit from QWidget, so they will have the style you defined for a QWidget, unless you name them or you specify the style for each one.
If you want to set style sheet for your MainMenu which inherits directly from QWidget (which is what you are doing in the first place), you have to set a name, and then apply the style :
setObjectName("MainMenu");
QString qwidgetStyle = "QWidget#MainMenu {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
setStyleSheet(qwidgetStyle); // here, only your MainMenu will have the style "qwidgetstyle"
Notice that you can, for example, set the same style sheet for every QWidget, and only add a particular color for your MainMenu :
// this is in a CSS, but you can apply it directly from the MainMenu constructor of course
QWidget, QWidget#MainMenu {
background-image: url(background.jpg);
border: 5px solid rgba(3, 5, 28, 1);
} // aplied to all QWidget
QWidget#MainMenu {
color : #9b9b9b; // a nice grey, only applied to MainMenu
}
Again, be specific when using style sheets or you will end up having strange colors/alignments everywhere in your application :). Hope that helps!
NB : you can also thank #PaulRooney who gave a very good link in the comments.

How to create a QPushButton with the text displayed over the icon?

I am trying to create a QPushButton in my project such that the text shows on top of the custom button image or icon.
I tried the below methods:
imagePath = path;
QPixmap pixmap(imagePath);
QIcon ButtonIcon(pixmap);
button->setIcon(ButtonIcon);
button->setIconSize(pixmap.rect().size());
button->setGeometry(0,0,height,width);
button->setStyleSheet(
"background-color: gray;"
"border: 1px solid black;"
"border-radius: "+QString::number(radius)+"px;"
"color: lightGray; "
"font-size: 25px;"
);
When I try to use the setText here, it shows the icon first and text on its right. I want the text to appear on top of the icon.
I also tried the below method I found online:
imagePath = path;
button->setGeometry(0,0,height,width);
button->setStyleSheet("background-image: url(:/images/images/2adjacentTracksButton.png));"
"background-position: center center");
This one is not accepting my url path, hence is not displaying the image I need on the button.
How can I solve this?
When it comes to manipulate button, you may want to do your own class, which will implement QAbstractButton. Something like this:
class MyButton : public QAbstractButton
{
Q_OBJECT
public:
static MyButton* createButton(QIcon icon, QWidget *parent);
~MyButton();
void setText(QString);
void setIcon(eIcon);
void setOrientation(Qt::Orientation);
protected :
MyButton(QWidget *parent);
// here, you can reimplement event like mousePressEvent or paintEvent
private :
QBoxLayout* m_ButtonLayout;
QLabel* m_IconLabel;
QIcon m_Icon;
QLabel* m_TextLabel;
}
In the .cpp :
MyButton::MyButton(QWidget *parent)
: QAbstractButton(parent)
{
m_ButtonLayout = new QBoxLayout(QBoxLayout::LeftToRight, this);
m_ButtonLayout->setAlignment(Qt::AlignCenter);
m_ButtonLayout->setContentsMargins(0, 0, 0, 0);
m_ButtonLayout->setSpacing(1);
m_IconLabel = new QLabel(this);
m_IconLabel->setAlignment(Qt::AlignCenter);
m_ButtonLayout->addWidget(m_IconLabel);
m_TextLabel = new QLabel(this);
m_TextLabel->setAlignment(Qt::AlignCenter);
m_ButtonLayout->addWidget(m_TextLabel);
//m_TextLabel->hide();
}
MyButton* MyButton::createButton(QIcon icon, QWidget *parent)
{
MyButton* pButton = new MyButton(parent);
pButton->setIcon(icon);
return pButton;
}
void MyButton::setText(QString text)
{
m_TextLabel->setVisible(!text.isEmpty());
m_TextLabel->setText(text);
QAbstractButton::setText(text);
}
void MyButton::setIcon(QIcon icon)
{
m_Icon = icon;
m_IconLabel->setVisible(true);
}
void MyButton::setOrientation(Qt::Orientation orientation)
{
if (orientation == Qt::Horizontal)
m_ButtonLayout->setDirection(QBoxLayout::LeftToRight);
else
m_ButtonLayout->setDirection(QBoxLayout::TopToBottom);
}
And now you can create your button with your icon by calling the static method:
MyButton* button = MyButton::createButton(myButtonIcon, this);
It is just a basic example I gave you, and I am not sure it will work (this is a thing I did some time ago) but you can give it a shot. Hope that helps !