Has anyone here done any QTQuick QML programming

I’ve been learning QML with Python, but none of my QML GUIs seem to follow my Desktop Theme.

Has anyone else had any similar issues?

Operating System: Manjaro Linux 
KDE Plasma Version: 5.27.5
KDE Frameworks Version: 5.106.0
Qt Version: 5.15.9
Kernel Version: 6.1.31-2-MANJARO (64-bit)
Graphics Platform: X11
Processors: 4 × Intel® Pentium® CPU N3540 @ 2.16GHz
Memory: 7.6 GiB of RAM
Graphics Processor: Mesa Intel® HD Graphics
Manufacturer: Notebook
Product Name: W54_W94_W955TU,-T,-C
System Version: Not Applicable

My Desktop Theme is Breath Dark,
Application Style is Breeze
Plasma Style is Breeze Dark

It seems odd to me, as KDE is based on Qt, and the current Version of Qt I’m working with is 5.15.9, and QtQuick, for QML, is 2.15.

QML is a model language - I have created them visually using qtcreator - saved them as ui files and converted to python code using the compiler (pyuic5 for pyqt5) - then importing them into the project.

I have also tried simple from scratch in python - they appear to follow theme - it was a phone number scraper - to quickly get phonenumber out of a page plastered with commercials and what-not.

I didn’t have any issues with following theme - I believe it was handled by the QtApplication object.

But I think there is a difference as I was not - at least knowingly - using QtQuick controls - but perhaps I was - using PyQt or Pyside and QtWidgets.

One thing I figured out was that you need to create a QApplication and if you want to ensure you get hidpi awareness you need something like (python 3 and pyqt5) this in your main.py - only snippets -

"""
Set application attributes before creating object
Enable High Dpi Scaling
"""
QCoreApplication.setAttribute(Qt.AA_EnableHighDpiScaling, True)


class MainWindow(QMainWindow, Ui_mainWindow):
    """
    Main Application Window
    """

    def __init__(self, parent=None):
        """
        Initialize MainWindow class
        """
        super(MainWindow, self).__init__(parent)
        self.setupUi(self)
        thread = QThread()
        thread.currentThread().setObjectName(__appname__)

[...]

if __name__ == '__main__':
    app = QApplication(sys.argv)
    pixmap = QPixmap(":/splash/splash.png")
    splash = QSplashScreen(pixmap, Qt.WindowStaysOnTopHint)
    splash.show()

    app.processEvents()

    window = MainWindow()
    window.show()

    qtimer = QTimer()
    qtimer.singleShot(5000, window.run)
    splash.finish(window)

    sys.exit(app.exec_())

If you want to peek into som terrible source code - novice python snake charmer

It should follow system theme unless you have hardcoded styles or colors.

EDIT: I think I have the answer: based on this reply at https://stackoverflow.com/questions/21770426/in-qt-qml-controls-applicationwindow-lacks-the-native-looking-theme-when-run

We are using QApplication and not QGuiApplication in this example. Though you can use QGuiApplication instead, doing this will eliminate platform-dependent styling. This is because it is relying on the widget module to provide the native look and feel.

I think it’s because I’m using PyQt5.QtGui.QGuiApplication, in my Python code. When I replaced it with PyQt5.QtWidgets.QApplication, the app Window now follows the Desktop theme.

Then using ApplicationWindow in my QML code, it works.

@linux-aarhus

The example you gave there is a QtWidgets example. I’m trying to build some small apps using QML and QtQuick Controls.

@ Tomek

I have not hardcoded any styles. I usually program with QtWidgets, so I’m learning QML with QtQuick Controls, so to keep things simple I am not trying anything fancy.

Here’s the QML for a Simple App That doesn’t yet work properly. I used QtCreator’s Designer

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

import QtQuick.Dialogs 1.3

Window {
    width: 400
    height: 120
    visible: true
    color: "#fcfbfb"
    title: qsTr("PNG File(s) to PDF Document")
    
    property string selectedFile: ""
    property string outputFile: ""
    
    property QtObject backend

    Column {
        id: column1
        x: 40
        y: 32
        width: 57
        height: 39

        Text {
            id: text1
            x: 0
            y: 0
            width: 30
            height: 16
            text: qsTr("PDFs")
            font.pixelSize: 12
        }
    }

    Column {
        id: column2
        x: 103
        y: 32
        width: 240
        height: 39
        
        TextField {
            id: textField
            x: 0
            y: 0
            width: 240
            height: 24
            placeholderText: ""
            text: selectedFile 
        }
    }

    Column {
        id: column3
        x: 344
        y: 32
        width: 24
        height: 24
        
        Button {
            id: button0
            width: 24
            height: 24
            text: "Ok"
            onClicked: {
                fileDialog.visible = true
            }
        }
        
        FileDialog {
            id: fileDialog
            title: "Choose one or more files"
            selectedNameFilter: "All Files (*);;Image Files (*.png)"
            selectMultiple : true
            onAccepted: {
                backend.read_file(fileDialog.fileUrls)
            }
        }
        
    }

    Column {
        id: column4
        x: 196
        y: 77
        width: 80
        height: 24

        Button {
            id: button1
            x: 0
            y: 0
            text: qsTr("Submit")
            rightPadding: 10
            onClicked: {
                backend.process_files()
            }
        }
    }

    Column {
        id: column5
        x: 288
        y: 77
        width: 80
        height: 24

        Button {
            id: button2
            x: 0
            y: 0
            text: qsTr("Cancel")
            leftPadding: 10
            onClicked: {
                Qt.quit()
            }
        }
    }
    
    Connections {
        target: backend

        function returnFileName(msg) {
            selectedFile = msg;
        }
        
    }
}

There’s one major problem with Designing QtQuick Controls based QML UIs with QtCreator.

It doesn’t recognise ApplicationWindow, as a valid Window Type.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.