Qt Quick Examples - Window and Screen#

This example demonstrates the Window and Screen types in QML.

Window and Screen screenshot

In addition, this example demonstrates the usage of the Qt Resource System in Qt for Python for more advanced scenarios. There are several QML files, one of which imports a module from this sibling directory. Both this “shared” module and the QML files of the example need to be compiled into Python modules with the resource compiler rcc.

For the “shared” module approach to work with QML and rcc, you need:

  • A module definition qmldir file

  • A Qt Resource Collection file (.qrc) specifying all the QML files and other resources, plus the qmldir file

The .qrc file is the input to rcc. This will generate a Python module (called shared_rc here) that can then be imported from the Python code. At runtime, only this Python module is needed, not the .qrc file or any of the .qml files or even the image resources, as they have all been compiled into the Python module.

For the example, rcc needs:

  • A Qt Resource Collection file (.qrc) specifying all the QML files and other resources. There is no qmldir file here because this is not a module.

This will generate a Python module (called window_rc here) that can then be imported from the Python code. Again, only the Python module is needed at runtime.

Download this example

# Copyright (C) 2022 The Qt Company Ltd.
# SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import os
from pathlib import Path
import sys

from PySide6.QtCore import QUrl, qWarning
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlComponent, QQmlEngine
from PySide6.QtQuick import QQuickWindow
from PySide6.QtQuickControls2 import QQuickStyle

import rc_window

# Append the parent directory of this file so that Python can find and
# import from the "shared" sibling directory.
sys.path.append(os.fspath(Path(__file__).parent.parent))
from shared import shared_rc


if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    if sys.platform == "win32":
        QQuickStyle.setStyle("Fusion")
    engine = QQmlEngine()

    # Add the qrc root as QML import path so that the "shared" module
    # can be found.
    engine.addImportPath(":/")

    component = QQmlComponent(engine)
    QQuickWindow.setDefaultAlphaBuffer(True)
    component.loadUrl(QUrl("qrc:///window/window.qml"))
    if component.isReady():
        component.create()
    else:
        qWarning(component.errorString())
        app.exit(1)
    app.exec()
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

QtObject {
    id: root
    property real defaultSpacing: 10
    property SystemPalette palette: SystemPalette { }

    property var controlWindow: Window {
        width: col.implicitWidth + root.defaultSpacing * 2
        height: col.implicitHeight + root.defaultSpacing * 2
        color: root.palette.window
        title: "Control Window"
        Column {
            id: col
            anchors.fill: parent
            anchors.margins: root.defaultSpacing
            spacing: root.defaultSpacing
            property real cellWidth: col.width / 3 - spacing
            Label { text: "Control the second window:" }
            Grid {
                id: grid
                columns: 3
                spacing: root.defaultSpacing
                width: parent.width
                Button {
                    id: showButton
                    width: col.cellWidth
                    text: root.testWindow.visible ? "Hide" : "Show"
                    onClicked: root.testWindow.visible = !root.testWindow.visible
                }
                //! [windowedCheckbox]
                CheckBox {
                    text: "Windowed"
                    height: showButton.height
                    width: col.cellWidth
                    Binding on checked { value: root.testWindow.visibility === Window.Windowed }
                    onClicked: root.testWindow.visibility = Window.Windowed
                }
                //! [windowedCheckbox]
                CheckBox {
                    height: showButton.height
                    width: col.cellWidth
                    text: "Full Screen"
                    Binding on checked { value: root.testWindow.visibility === Window.FullScreen }
                    onClicked: root.testWindow.visibility = Window.FullScreen
                }
                Button {
                    id: autoButton
                    width: col.cellWidth
                    text: "Automatic"
                    onClicked: root.testWindow.visibility = Window.AutomaticVisibility
                }
                CheckBox {
                    height: autoButton.height
                    text: "Minimized"
                    Binding on checked { value: root.testWindow.visibility === Window.Minimized }
                    onClicked: root.testWindow.visibility = Window.Minimized
                }
                CheckBox {
                    height: autoButton.height
                    text: "Maximized"
                    Binding on checked { value: root.testWindow.visibility === Window.Maximized }
                    onClicked: root.testWindow.visibility = Window.Maximized
                }
            }
            function visibilityToString(v) {
                switch (v) {
                case Window.Windowed:
                    return "windowed";
                case Window.Minimized:
                    return "minimized";
                case Window.Maximized:
                    return "maximized";
                case Window.FullScreen:
                    return "fullscreen";
                case Window.AutomaticVisibility:
                    return "automatic";
                case Window.Hidden:
                    return "hidden";
                }
                return "unknown";
            }
            Label {
                id: visibilityLabel
                text: "second window is " + (root.testWindow.visible ? "visible" : "invisible") +
                      " and has visibility " + parent.visibilityToString(root.testWindow.visibility)
            }
            Rectangle {
                color: root.palette.text
                width: parent.width
                height: 1
            }
            CurrentScreen { }
            Rectangle {
                color: root.palette.text
                width: parent.width
                height: 1
            }
            AllScreens { width: parent.width }
        }
    }

    property var testWindow: Window {
        width: 320
        height: 240
        color: "#215400"
        title: "Test Window with color " + color
        flags: Qt.Window | Qt.WindowFullscreenButtonHint
        Rectangle {
            anchors.fill: parent
            anchors.margins: root.defaultSpacing
            Label {
                anchors.centerIn: parent
                text: "Second Window"
            }
            MouseArea {
                anchors.fill: parent
                onClicked: root.testWindow.color = "#e0c31e"
            }
            Button {
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.margins: root.defaultSpacing
                text: root.testWindow.visibility === Window.FullScreen ? "exit fullscreen" : "go fullscreen"
                width: 150
                onClicked: {
                    if (root.testWindow.visibility === Window.FullScreen)
                        root.testWindow.visibility = Window.AutomaticVisibility
                    else
                        root.testWindow.visibility = Window.FullScreen
                }
            }
            Button {
                anchors.left: parent.left
                anchors.top: parent.top
                anchors.margins: root.defaultSpacing
                text: "X"
                width: 30
                onClicked: root.testWindow.close()
            }
        }
    }

    property var splashWindow: Splash {
        onTimeout: root.controlWindow.visible = true
    }
}
<RCC>
    <qresource prefix="/window">
        <file>window.qml</file>
        <file>Splash.qml</file>
        <file>CurrentScreen.qml</file>
        <file>AllScreens.qml</file>
    </qresource>
</RCC>
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import shared

//! [splash-properties]
Window {
    id: splash
    color: "transparent"
    title: "Splash Window"
    modality: Qt.ApplicationModal
    flags: Qt.SplashScreen
    property int timeoutInterval: 2000
    signal timeout
//! [splash-properties]
//! [screen-properties]
    x: (Screen.width - splashImage.width) / 2
    y: (Screen.height - splashImage.height) / 2
//! [screen-properties]
    width: splashImage.width
    height: splashImage.height

    Image {
        id: splashImage
        source: Images.qtLogo
        MouseArea {
            anchors.fill: parent
            onClicked: Qt.quit()
        }
    }
    //! [timer]
    Timer {
        interval: splash.timeoutInterval; running: true; repeat: false
        onTriggered: {
            splash.visible = false
            splash.timeout()
        }
    }
    //! [timer]
    Component.onCompleted: visible = true
}
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Column {
    id: root
    spacing: 8

    Label {
        text: "Total number of screens: " + screenInfo.count
        font.bold: true
    }

    Flow {
        spacing: 12
        width: parent.width

        Repeater {
            id: screenInfo
            model: (Qt.application as Application).screens
            Label {
                required property string name
                required property int virtualX
                required property int virtualY
                required property var modelData // avoid shadowing Label.width and height

                lineHeight: 1.5
                text: name + "\n" + virtualX + ", " + virtualY + " " + modelData.width + "x" + modelData.height
            }
        }
    }

    Component.onCompleted: {
        var screens = (Qt.application as Application).screens;
        for (var i = 0; i < screens.length; ++i)
            console.log("screen " + screens[i].name + " has geometry " +
                        screens[i].virtualX + ", " + screens[i].virtualY + " " +
                        screens[i].width + "x" + screens[i].height)
    }
}
// Copyright (C) 2021 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick
import QtQuick.Controls

Item {
    id: root
    width: 400
    height: propertyGrid.implicitHeight + 16

    function orientationToString(o) {
        switch (o) {
        case Qt.PrimaryOrientation:
            return "primary";
        case Qt.PortraitOrientation:
            return "portrait";
        case Qt.LandscapeOrientation:
            return "landscape";
        case Qt.InvertedPortraitOrientation:
            return "inverted portrait";
        case Qt.InvertedLandscapeOrientation:
            return "inverted landscape";
        }
        return "unknown";
    }

    Grid {
        id: propertyGrid
        columns: 2
        spacing: 8
        x: spacing
        y: spacing

        //! [screen]
        Label {
            text: "Screen \"" + Screen.name + "\":"
            font.bold: true
        }
        Item { width: 1; height: 1 } // spacer

        Label { text: "manufacturer" }
        Label { text: Screen.manufacturer ? Screen.manufacturer : "unknown" }

        Label { text: "model" }
        Label { text: Screen.model ? Screen.model : "unknown" }

        Label { text: "serial number" }
        Label { text: Screen.serialNumber ? Screen.serialNumber : "unknown" }

        Label { text: "dimensions" }
        Label { text: Screen.width + "x" + Screen.height }

        Label { text: "pixel density" }
        Label { text: Screen.pixelDensity.toFixed(2) + " dots/mm (" + (Screen.pixelDensity * 25.4).toFixed(2) + " dots/inch)" }

        Label { text: "logical pixel density" }
        Label { text: Screen.logicalPixelDensity.toFixed(2) + " dots/mm (" + (Screen.logicalPixelDensity * 25.4).toFixed(2) + " dots/inch)" }

        Label { text: "device pixel ratio" }
        Label { text: Screen.devicePixelRatio.toFixed(2) }

        Label { text: "available virtual desktop" }
        Label { text: Screen.desktopAvailableWidth + "x" + Screen.desktopAvailableHeight }

        Label { text: "position in virtual desktop" }
        Label { text: Screen.virtualX + ", " + Screen.virtualY }

        Label { text: "orientation" }
        Label { text: root.orientationToString(Screen.orientation) + " (" + Screen.orientation + ")" }

        Label { text: "primary orientation" }
        Label { text: root.orientationToString(Screen.primaryOrientation) + " (" + Screen.primaryOrientation + ")" }
        //! [screen]

        Label { text: "10mm rectangle" }
        Rectangle {
            color: "red"
            width: Screen.pixelDensity * 10
            height: width
        }
    }
}