Qt Quick2 Material Dark Theme looks buggy/unreadable - qt

I applied Material Dark Theme on my application as recommended on this question:
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickStyle>
#include <QDebug>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
qputenv("QT_QUICK_CONTROLS_STYLE", QByteArray("Material"));
qputenv("QT_QUICK_CONTROLS_MATERIAL_THEME", QByteArray("Dark"));
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
And my main.qml:
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Button {
id: button
x: 145
y: 70
width: 151
height: 90
text: qsTr("Button")
}
RoundButton {
id: roundButton
x: 401
y: 120
text: "+"
}
CheckBox {
id: checkBox
x: 157
y: 297
text: qsTr("Check Box")
}
Slider {
id: slider
x: 345
y: 232
value: 0.5
}
DelayButton {
id: delayButton
x: 377
y: 344
text: qsTr("Delay Button")
}
Switch {
id: switch1
x: 151
y: 409
text: qsTr("Switch")
}
}
While default material works as expected, if I change to material dark it looks like this:
Material dark looks buggy:
I am pretty sure it shouldn't look like this. Did I miss to install something or do I need to import something additionally?
Using qtcreator on Windows, qml objects are just random unchanged controls.

That should work with the Window from Qt Quick. Please create a bug report for that. Using ApplicationWindow does work though.

Related

Create Transparent Window in QtQuick to show external application through

I am trying to create a QtQuick application running under Linux (Lubuntu 20.04) with a transparent window that shows the desktop or any other application running in the background.I also require a couple of other windows which aren't transparent.
I have tried the suggestions here:
QtQuick 2 Transparent Window Background I just end up with either a grey or black background which doesn't show the desktop.
I have tried all combinations of opacity: 0.0 or color: "transparent", but none give the correct effect.
Here is a minimal non working example:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Styles 1.4
ApplicationWindow {
id: transparentWindowTest
//flags: Qt.FramelessWindowHint
visible: true
width: 500
height: 500
x: (Screen.width - width) / 2
y: (Screen.height - height) / 2
color: "transparent"
opacity: 0.0
Rectangle {
id: transparentWindow
anchors.left: parent.left
anchors.top: parent.top
width: 300
height: 300
color: "transparent"
opacity: 0.0
}
Rectangle {
id: rightWindow
anchors.left: transparentWindow.right
anchors.top: parent.top
width: 200
height: parent.height
color: "blue"
}
Rectangle {
id: bottomWindow
anchors.left: parent.left
anchors.top: transparentWindow.bottom
width: parent.width
height: 200
color: "red"
}
}
Any suggestions on the best way of achieving this?
I have also tried the suggestions in:
How to make a transparent window with Qt Quick?, but these just show a dark background that is not transparent at all. Note that I had to modify the second example so that it would compile under Qt5.15.2, as show below:
transparent2.pro:
QT += quick
# You can make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES += \
main.cpp
RESOURCES += qml.qrc
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
main.cpp:
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
main.qml:
import QtQuick 2.15
import QtQuick.Window 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
opacity: 0.0
color: "transparent"
Rectangle {
id: root
width: 250
height: 250
// completely transparent background
color: "#00FFFFFF"
border.color: "#F00"
border.width: 2
Rectangle {
id: ball
height: 50; width: 50
x: 100
color: "#990000FF"
radius: height / 2
}
SequentialAnimation {
running: true; loops: Animation.Infinite
NumberAnimation { target: ball; property: "y"; to: root.height - ball.height; duration: 1000; easing.type: Easing.OutBounce }
PauseAnimation { duration: 1000 }
NumberAnimation { target: ball; property: "y"; to: 0; duration: 700 }
PauseAnimation { duration: 1000 }
}
}
}
Here is a screenshot showing the output:

QT6.1 - Qml Why does the ProgressBar not have an animation corresponding to the indeterminate property?

As the title says, I set the indeterminate property of the ProgressBar to True, but he doesn't have any animation.
Just like this:
But:
I use the default project and the code is very simple.
I would like to know if the indeterminate itself does not have any animation or what is wrong with it?
Thanks for your help.
By the way, this is the first time I'm looking for answers here, so I hope it will be a pleasant experience :)
version:
Qt6.1.1 MinGW 64-bit (default Debug Version)
The code is as follows:
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
ProgressBar{
id: proBar
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 20
from: 1
to: 1
indeterminate: true
}
}
Yes, that's all the code in my qml. The rest of the file did not change a word
I think it relates to your Qt version , I test your code in my Qt .
I use Qt5.14 and GCC compiler, the result is this :
For adding Style :
in main.cpp put this
QQuickStyle::setStyle("Universal");
like this :
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickStyle>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQuickStyle::setStyle("Universal");
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl)
{
if (!obj && (url == objUrl))
{
QCoreApplication::exit(-1);
}
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
and in .pro file add this :
QT += quick quickcontrols2
Edited code
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Universal 2.12
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
Universal.theme: Universal.Dark
Universal.accent: Universal.Red
ProgressBar{
id: proBar
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: 70
from: 1
to: 1
indeterminate: true
}
}

Make new window from separate file appear or disappear with QQmlApplicationEngine

I'm using QQmlApplicationEngine то load my main window.
QQmlApplicationEngine engine;
engine.load("GUI.qml");
Where GUI.qml is my main GUI file. How I can create and destruct a new window from code? As far as I can see, if I write engine.load("SecondWindow.qml");, how I can close it? Or I should create and destruct such objects from QML itself?
Option 1: You can do it from QML, see this sample:
import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
title: "Window 1"
CheckBox {
id: cb
text: "Show Window #2"
}
Loader {
active: cb.checked
sourceComponent: Component {
ApplicationWindow { // Or "SecondWindow"
visible: true
width: 640
height: 480
title: "Window 2"
}
}
}
}
Option 2: Also, you can control it from C++ side, for example like this:
QML
import QtQuick 2.12
import QtQuick.Controls 2.5
ApplicationWindow {
id: window
visible: true
width: 640
height: 480
title: "Window 1"
Loader {
active: showWindowFlag
// Instead of "sourceComponent" you can use
// source: "SecondWindow.qml"
sourceComponent: Component {
ApplicationWindow {
visible: true
width: 640
height: 480
title: "Window 2"
}
}
}
}
C++
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>
#include <QTimer>
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
bool showWindowFlag = false;
engine.rootContext()->setContextProperty("showWindowFlag", showWindowFlag); // !!!!
auto timer = new QTimer(&engine); // Parent will delete timer
QObject::connect(timer, &QTimer::timeout, [&](){
showWindowFlag = !showWindowFlag;
engine.rootContext()->setContextProperty("showWindowFlag", showWindowFlag);
});
timer->setInterval(1000);
timer->setSingleShot(false);
timer->start();
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}

Customize or Define new Qml ChartView theme

There's an official sample code that customize background and plot area brushes of QChart: Custom chart example
How can I acheive this in Qml way with ChartView(Qml type)?
I want to customize Qml ChartView like that sample. but there's no direct way(qml property) to change brushes from qml. also ChartView.ChartTheme property are predefined and hardcoded in C++. I don't know if its possible and how to inherit QChart to change those properties from C++ and define custom QML Type.
Not all modifiable properties in Qt Charts C ++ are modifiable in QML, although it is possible to access the QChart through filtering using findChild and items.
It is also possible to modify some unexposed axis properties in a similar way.
#include <QtQuick>
#include <QtWidgets>
#include <QtCharts>
class Helper: public QObject
{
Q_OBJECT
public:
Q_INVOKABLE void update_chart(QQuickItem *item){
if(QGraphicsScene *scene = item->findChild<QGraphicsScene *>()){
for(QGraphicsItem *it : scene->items()){
if(QtCharts::QChart *chart = dynamic_cast<QtCharts::QChart *>(it)){
// Customize chart background
QLinearGradient backgroundGradient;
backgroundGradient.setStart(QPointF(0, 0));
backgroundGradient.setFinalStop(QPointF(0, 1));
backgroundGradient.setColorAt(0.0, QRgb(0xd2d0d1));
backgroundGradient.setColorAt(1.0, QRgb(0x4c4547));
backgroundGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
chart->setBackgroundBrush(backgroundGradient);
// Customize plot area background
QLinearGradient plotAreaGradient;
plotAreaGradient.setStart(QPointF(0, 1));
plotAreaGradient.setFinalStop(QPointF(1, 0));
plotAreaGradient.setColorAt(0.0, QRgb(0x555555));
plotAreaGradient.setColorAt(1.0, QRgb(0x55aa55));
plotAreaGradient.setCoordinateMode(QGradient::ObjectBoundingMode);
chart->setPlotAreaBackgroundBrush(plotAreaGradient);
chart->setPlotAreaBackgroundVisible(true);
}
}
}
}
Q_INVOKABLE void update_axes(QtCharts::QAbstractAxis *axisX, QtCharts::QAbstractAxis *axisY){
if(axisX && axisY){
// Customize axis colors
QPen axisPen(QRgb(0xd18952));
axisPen.setWidth(2);
axisX->setLinePen(axisPen);
axisY->setLinePen(axisPen);
// Customize grid lines and shades
axisY->setShadesPen(Qt::NoPen);
axisY->setShadesBrush(QBrush(QColor(0x99, 0xcc, 0xcc, 0x55)));
}
}
};
int main(int argc, char *argv[])
{
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication app(argc, argv);
QQmlApplicationEngine engine;
Helper helper;
engine.rootContext()->setContextProperty(QStringLiteral("helper"), &helper);
const QUrl url(QStringLiteral("qrc:/main.qml"));
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
engine.load(url);
return app.exec();
}
#include "main.moc"
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtCharts 2.0
ApplicationWindow {
id: root
visible: true
width: 640
height: 480
ChartView {
id: view
anchors.fill: parent
title: "Customchart example"
titleColor: "white"
titleFont.pixelSize: 18
antialiasing: true
LineSeries{
axisX: CategoryAxis {
id: xaxis
min: 0
max: 30
labelsFont.pixelSize: 12
gridVisible: false
labelsColor: "white"
CategoryRange {
label: "low"
endValue: 10
}
CategoryRange {
label: "optimal"
endValue: 20
}
CategoryRange {
label: "high"
endValue: 30
}
}
axisY: CategoryAxis {
id: yaxis
min: 0
max: 30
labelsFont.pixelSize: 12
gridVisible: false
labelsColor: "white"
shadesVisible: true
CategoryRange {
label: "slow"
endValue: 10
}
CategoryRange {
label: "med"
endValue: 20
}
CategoryRange {
label: "fast"
endValue: 30
}
}
color: "#fdb157"
width: 5
XYPoint { x: 0; y: 6 }
XYPoint { x: 9; y: 4 }
XYPoint { x: 15; y: 20 }
XYPoint { x: 25; y: 12 }
XYPoint { x: 29; y: 26 }
}
Component.onCompleted: {
view.legend.visible = false
helper.update_chart(view)
helper.update_axes(xaxis, yaxis)
}
}
}

The program has unexpectedly finished - app crashed

I have a problem with Qt Charts in QML modeling. I have a simple application that implements a very simple ChartView. As I run the application, it crashed and I get the error in Application Output The program has unexpectedly finished.
I added in my src.pro
QT += qml quickcontrols2 charts
and my applications is this
import QtCharts 2.2
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView {
anchors.fill: parent
theme: ChartView.ChartThemeBrownSand
antialiasing: true
PieSeries {
id: pieSeries
PieSlice { label: "eaten"; value: 94.9 }
PieSlice { label: "not yet eaten"; value: 5.1 }
}
}
}
How do I have this problem?
Check if you are using QGuiApplication instead of QApplication in your main.cpp.
The following example works properly, but it crashes if we use QGuiApplication in main():
Note: Since Qt Creator 3.0 the project created with Qt Quick Application wizard based on Qt Quick 2 template uses QGuiApplication by default. As Qt Charts utilizes Qt Graphics View Framework for drawing, QApplication must be used. The project created with the wizard is usable with Qt Charts after the QGuiApplication is replaced with QApplication.
More info here.
main.cpp
#include <QApplication>
#include <QQuickView>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQuickView *view = new QQuickView;
view->setSource(QUrl(QLatin1String("qrc:/main.qml")));
view->show();
return app.exec();
}
main.qml
import QtQuick.Controls 2.0
import QtQml 2.2
import QtCharts 2.0
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
ChartView {
anchors.fill: parent
theme: ChartView.ChartThemeBrownSand
antialiasing: true
PieSeries {
id: pieSeries
PieSlice { label: "eaten"; value: 94.9 }
PieSlice { label: "not yet eaten"; value: 5.1 }
}
}
}

Resources