QML Window span accross two screens

theunsheydenrych

HI
I have a QML application and I would like to have the application window span over two screens. The screen sizes is 1980x1080.
I am using Kubuntu 20.04 and Qt6.2.3
When running the application it just "snaps" to the top of the left screen.
I console logged the value of the window width out in Component.onCompleted the output looks like this

QML debugging is enabled. Only use this in a safe environment.
qml: Window Width 3960 // Width in Component.onCompleted
qml: onWidthChanged: 1920

Its is created with the correct size, then the size is just changed to the size of one screen (1920)

This is the code

import QtQuick
import QtQuick.Controls 2.12

Window {
    id: mainScreen
    y: 0
    x: 0
    width: 3840
    height: 1080
    visible: true
    onWidthChanged: {
        console.log("onWidthChanged: " + width)
    }
    title: qsTr("Hello World")
    Component.onCompleted: {
        console.log("Window Width", width)
    }
}

What do I have to change or add so that it keeps the width?

lemons

the easiest way is to set the minimumWidth of the window, as then the window manager does not take over the window sizing:

Window {
    id: window
    visible: true
    minimumWidth: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableHeight
}

alternatively you could simply bypass the window manager completely. this way you can span the application across all screens the system has access to. note you should have a close button present when testing. It totally depends on the use case if this is a suitable solution. for applications, that just display information in fullscreen, this is a simple solution.

Window {
    id: window
    visible: true
    width: Screen.desktopAvailableWidth
    height: Screen.desktopAvailableHeight
    flags: Qt.BypassWindowManagerHint

    Button {
        text: "CLOSE"
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.margins: 10
        onClicked: Qt.quit()
    }
}

Markkyboy

@theunsheydenrych - you are giving different sizes for your monitors, are you sure about 1980 wide?, not 1920? (as 1920 x 2 = 3840), where as 1980 x 2 = 3960. Yet in your code, I see 3840 as width.

I have an app that I wanted to display at the bottom of my second monitor, here is the code (it might help you with positioning);

Window {
    id: main
    visible: true

    width: 1920 // <--- width of my application's window
    height: 100 // <--- height of my application's window
    x: 1920     // <--- where my app sits horizontally in second monitor
    y: 980      // <--- where my app sits vertically in second monitor

    color: "#00000000"
    flags: Qt.FramelessWindowHint | Qt.WindowStaysOnTopHint

theunsheydenrych

@lemons Thank you for response.

Window {
id: window
visible: true
minimumWidth: Screen.desktopAvailableWidth
height: Screen.desktopAvailableHeight
}

Works for me.

Only issue I have now, is that "Other" things use screen real estate, like in Ubuntu, the Dock on the side, you have to set it not to use the full height of the screen, only then the window manager, will place the QML Window at 0,0. Also the top bar, take some screen real estate, so the Screen.desktopAvailableHeight does not take that in account, and you have to tweak the window height to fit better.

But thank you, you definitely put me on the right track.