Qt 5, QML 2.0 and transparent borderless window incompatibility - c++

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

Related

Qt QTabWidget background color

I have been trying to set the background color of a QTabWidget to black (or any other color for), but have been unsuccessful in doing so.
It seems that you need the option autoFillBackground set and then also set "background-color: black;" in the stylesheet. This then displays it properly in the Designer, but fails in the application.
This answer suggests to enclose it in another QWidget and then use the transparency, but that is a hack around the issue.
How do I set the background color of a QTabWidget via stylesheets?
EDIT
Setting QTabBar { background-color: black; } results in the following image.
As an alternative to QTreeWidget, use QTabBar + QStackedWidget and the following stylesheet
QTabBar { background-color: black; }
or use
Qt: Styling QTabWidget

Changing the color of a QFrame in QT

I have set the color of my main window in QT to be grey.
ui(new Ui ::MainWindow)
ui-> setupUi(this)
this->setStyleSheet("background-color: grey;");
I have tried multiple ways to set the color of the QFrame, however it takes on the default grey color that I have set. One way I tried is below.
ui->frame->setStyleSheet("color:rgb(255,255,255)");
I have tried to change the color of the QFrame by using the setStyleSheet method but no matter which color I assign it remains grey. I have tried setting the background, border, and color. Is there any way to do this that I am overlooking?
You need to set the background color of the QFrame.
Set the QFrame's style sheet to the following:
"background-color: rgb(255, 255, 255);"
For Python (PyQt) users:
frame = QFrame(self)
frame.setStyleSheet('background-color: rgb(50,50,50)')
Set a MainWindow (not the QFrame) StyleSheet like this:
QMainWindow{
background-color: gray
}
QFrame {
border: 5px solid black
}
This worked for me:
mainwindow->setStyleSheet("QMainWindow{background-color: gray} QFrame { border: 5px solid black } ");
This troubled me quite some time. Before setting the actual stylesheet unset it first:
ui->frame->setStyleSheet("");
ui->frame->setStyleSheet("background-color: rgb(255,255,255)");
For more customisation options have a look at https://doc.qt.io/qt-5/stylesheet-examples.html and for larger projects you might want to think about setting up global stylesheets for your app.
This works for me:
ui->frame->setStyleSheet("background-color: rgb(251, 255, 206);");

QWidget background transparent

I have a widget in the main window, the widget has the following styles:
background-color:#ffeeeeee;width:100%;height:100%;
It is set-up to widget layout and controls auto size to fill the geometry of the widget, but the background of the widget is always transparent. What can I do to make it opaque?
This is using Qt5.6 running on RedHat Linux 7.2
NOTE: The syntax #ffeeeeee is specific to Qt, where the first node is the alpha, then red, green and blue octets.
You have too many characters in your color. Change:
background-color: #ffeeeeee;
to:
background-color: #eeeeee;
If you want to use transparency, you'll have to be explicit:
background-color: rgba(...);
With the background-color present and set to any of the following:
background-color:white;width:100%;height:100%;
or
background-color:#ffffff;width:100%;height:100%;
or my original:
background-color:#ffeeeeee;width:100%;height:100%;
The property, autoFillBackground is set to false and the background of the widget is transparent at run-time.
However removing any background-color style and leaving the style as just:
width:100%;height:100%
The property, autoFillBackground is set to true and the widget is opaque.
As far as I can see there is no error in the styles, I believe this may be an error in Qt.
Have you tried using QWidget::setWindowOpacity(1) where 1 = opaque and 0 = transperant.
Also try QGraphicsOpacityEffect.The following is code for setting the 50 percent opacity for a pushbutton but It can be extended to a widget as well.
ui->setupUi(this);
QGraphicsOpacityEffect * effect = new QGraphicsOpacityEffect(ui->pushButton);
effect->setOpacity(0.5);
ui->pushButton->setGraphicsEffect(effect);

QWebView set border visible

I want to make QWebView widget have borders in my layout and UI when running, similar to QTableView. Now it looks borderless and hidden.
Is it even possible?
It's not possible to set border to QWebView. Instead you can place your QWebView inside another QWidget and set it's border. See example below (QtDesigner):
Widgets hierarchy:
Look inside QtDesigner:
StyleSheet for QFrame:
QFrame
{
border: 1px solid black;
background: white;
}

Problem in stylesheet of Qt APP

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.