I have a QWidget which should take place over the central widget of my application which is a VideoWidget for playing video. The problem is that I can't set background of the QWidget to be transparent.
Use a StyleSheet (you can do that in code with setStylesheet or in the ui file : RMB on the widget you want "Change stylesheet" or even in the properties tab)
for instance
"background-color: rgba(255, 255, 0, 50);"
gives a yellow transparant look:(example of a button used on top of another button)
With stylesheets you can control the look of a complete program or just the specific widgets you want. More info in the style sheet reference
You could make the full Widget invisible:
QWidget::setHidden(true);
Related
I need to create a toggle button in qt and it should look like the below image. It should show the ON image when it is turned on and remain at this state until it is toggled again. It should show the OFF image in the off case. Please help me on this.
You can use images as an icon (sadly, it won't scale with button by default), create a class which would paint those images in the handler for paint event, or you can use those images in QSS stylesheet. QSS is CSS 2.0 analog for Qt's GUI elements.
Note that after using stylesheet all changes to visuals of said element should be done through changes to stylesheet as well.
THose styles can be set through form editor by right-clicking a widget and choosing "Change stylesheet" or through code directly by calling setStyleSheet, depending which workflow you prefer.
button->setStyleSheet(
"QPushButton { border-image: url(:/Resources/chbUnchecked.png); }"
"QPushButton::checked { border-image: url(:/Resources/chbChecked.png); }" );
border-image Scales image to border limits, replacing standard border.There is also a background-image which fills widget's surface with regular repeats.
To limit this change only for checkable buttons:
button->setStyleSheet(
"QPushButton[checkable="true"] { border-image: url(:/Resources/chbUnchecked.png); }"
"QPushButton::checked[checkable="true"] { border-image: url(:/Resources/chbChecked.png); }" );
:/Resources/ is a path within app's resources.
QSS syntax: https://doc.qt.io/Qt-5/stylesheet-syntax.html
Note that QSS have selectors, so it's it have same "Cascading" ability as CSS. You can assign styles bulk based on hierarchical location on GUI, class-inheritances, class names, quasi-states and names.
If you set style above to a window, all instances of QPushButton within that window would have said style. If you define a new class for such Button, you can use its name instead of standard button class, although QSS for base class would apply to it.
the easiest way is to add the on-off images to your project as resources
then set the button as checkable and in its properties set the images to be rendered when is selected or not..(under icon -> selected on and selected off)
of course you have create images with a properly geometry... in the screenshot they look pretty small because I borrow them from your post..
:)
Tasks:
Rounded-corners window
Custom borders
QML in QWidget
Because there is no way to change border style in parent widget, I made two of them. First parent widget is transparent, it's set in QSS. Second one is the one with rounded-corners, also set in QSS. p.s. I guess it isn't smartest idea. Not even close.
To make it work, I've set up Qt::WA_TranslucentBackground attribute.
Set up Qt::FramelessWindowHint window flag.
QML 2.0 style.[in code below]
So problem is:
When WA_TranslucentBackground and FramelessWindowHint is on - NO QML
When FramelessWindowHint is on - Only QML view
When WA_TranslucentBackground or both are off - still system BORDERS
Also I've tried to set mask on MainWindow
QPixmap pixmap = QWidget::grab(this->rect());
this->setMask(pixmap.createMaskFromColor(Qt::transparent, Qt::MaskInColor));
Works well, no system borders, custom one is rounded and QML works, but whole other area became white, don't know how to fix.
MainWindow:
QFile styleFile("style.qss");
styleFile.open(QFile::ReadOnly), qApp->setStyleSheet(QLatin1String(styleFile.readAll()));
QWidget *container = QWidget::createWindowContainer(new QQuickView(QUrl("main.qml")), this);
ui->verticalLayout->addWidget(container);
//this->setAttribute(Qt::WA_TranslucentBackground, true);
//this->setWindowFlags(Qt::FramelessWindowHint | Qt::Window);
QPixmap pixmap = QWidget::grab(this->rect());
this->setMask(pixmap.createMaskFromColor(Qt::transparent, Qt::MaskInColor));
Styles:
QWidget#MainWindow{
background:transparent;
}
QWidget#MainWindowRounded{
background-color: grey;
border: 1px solid black;
border-radius: 5px;
}
Is this possible to resolve?
HERE SOURCE CODE
I have a custom widget which inherits from QWidget and contains some labels in its layout. I would like to change the background color of the widget and the labels in the widget (this is, everything!) every time I put the mouse over it.
When using *:hover { background: red; } in my custom widget, I only get the contents red when moving the mouse over the labels, but not outside them, between labels, etc. I don't understand this behavior taking into account that I put the StyleSheet in the parent widget.
Any ideas? Many thanks,
You can set the parent's stylesheet which will cascade to children like this:
parent->setStyleSheet("* {background: red}");
For hovering only:
parent->setStyleSheet("*:hover {background: red}");
Check out https://qt-project.org/doc/qt-5.1/qtwidgets/stylesheet-syntax.html
Finally I solved the problem creating a QFrame inside the main QWidget and setting the StyleSheet of that QFrame.
How can I modify an existing stylesheet?
For example: if I want to create buttons, which when pressed each modify a single aspect of the stylesheet. One button can insert a margin-left attribute of 10. Another button can make the background colors blue. Lastly, another button can round the corners. The trick here though, is that I dont want to store all the variables and rebuild the style sheet on each button press. I would like to have a simple this->setStyleSheet(this->getStylesheet()+"margin-left: 10px:") for example.
Is there any way to do this?
Here is the code in main.cpp
QWidget wdg;
QHBoxLayout hlay;
wdg.setStyleSheet("border:2px solid rgb(74, 74, 74);");
QPushButton btn;
btn.setStyleSheet("border-radius:5px;");
btn.setText("Hello");
QPushButton btn2;
btn2.setStyleSheet("background-color: rgb(190, 190, 190);");
btn2.setText("Hello");
hlay.addWidget(&btn);
hlay.addWidget(&btn2);
qDebug()<<btn.styleSheet();
wdg.setLayout(&hlay);
wdg.show();
setting and getting style sheet works with QString and so you can use + operator.
In my app, i have a section that is top widget, the color of the top widget is gray, and i've been put severl widget on top widget, like QComboBox, QLineEdit and 2 QButton, but i have a problem when i right click on QLineEdit as you seen in below picture, the color of default context of window is gray, or when i open the QComboBox the color of background is gray. I'll set the background color of two these widget to white but doesn't work. So, how can i fix this?
Sample for better understand:
http://0000.4.img98.net/out.php/i52512_problem.png
Please help me
The style sheet propagates to all the child widgets, so you have to limit their range by using the right selectors. Since the context menu is a child of the QLineEdit it is also affected.
// What you have probably done:
myLineEdit->setStyleSheet("background-color: gray");
// What you should have done:
myLineEdit->setStyleSheet("QLineEdit { background-color: gray }");
// What you should do if there might be child widgets of the same type
// but for which you don't want the style to apply:
myLineEdit->setObjectName("myLineEdit");
myLineEdit->setStyleSheet("QLineEdit#myLineEdit { background-color: gray }");
See "The Style Sheet Syntax - Selector Types" for details.