iterating a Qml across multiple screens-CodePudding

It shows qml on main screen. I want to repeat the same image on other screens. They will all be exactly the same. It will be renewed on all screens according to the change in Main. Is something like this possible ?

code in main.qml

PlaybackControl {
    id: playbackControl
    anchors {
        right: parent.right
        left: parent.left
        bottom: parent.bottom
    }
    mediaPlayer: mediaPlayer
    mediaPlayer2: mediaPlayer2
}

CodePudding user response：

This is some simple test application that should dynamically create and show the same window on each available screen in its top-right corner

ApplicationWindow {
    id: main
    width: 640
    height: 480
    visible: true
    title: qsTr("Multiple screens test")

    property list<Window> windows;

    Component {
        id: windowComponent
        Window {
            id: window
            width: 200
            height: 50
            visible: true
            flags: Qt.FramelessWindowHint
            property alias caption: txt.text
            x: screen.width - window.width
            y: 0
            Text {
                id: txt
                anchors.centerIn: parent
                text: ""
            }
        }
    }

    Component.onCompleted: {
        var screens = Application.screens;
        for(var s in screens)
        {
            var wnd = windowComponent.createObject(main.contentItem, { screen: screens[s], caption: "some text" });
            main.windows.push(wnd);
            wnd.show();
        }
    }

    Button {
        anchors.centerIn: parent
        text: "change caption"
        onClicked: {
            for(var w in main.windows) {
                main.windows[w].caption = "another text";
            }
        }
    }
}

The each window is stored in an array so you can access that.

CodePudding user response：

The pattern I have seen is:

StackView control used for Page navigation
The application declares a footer that is seen on all pages
Each page declares a unique header

The impact of this is that every page will see the same footer but a different header. I implement a media play and stop Button in the footer. The header shows which page you are on and there is inter-page navigation.

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    property bool started: false

    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: "MainPage.qml"
    }
    footer: Frame {
        RowLayout {
            AppIconButton {
                icon.source: started ? "square-32.svg" : "play-32.svg"
                onClicked: started = !started
            }
        }
    }
}

//MainPage.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    header: Frame {
        Text { text: "MainPage.qml" }
    }
    Button {
        anchors.centerIn: parent
        text: qsTr("Second Page")
        onClicked: stackView.push("SecondPage.qml")
    }
}

//SecondPage.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
    header: Frame {
        RowLayout {
            AppIconButton {
                icon.source: "chevron-left-32.svg"
                onClicked: stackView.pop()
            }
            Text { text: "SecondPage.qml"
 }
        }
    }
}

//AppIconButton.qml
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Rectangle {
    id: iconButton
    Layout.preferredWidth: 32
    Layout.preferredHeight: 32
    property alias icon: btn.icon
    clip: true
    signal clicked()
    Button {
       id: btn
       anchors.centerIn: parent
       icon.width: parent.width
       icon.height: parent.icon
       onClicked: iconButton.clicked()
    }
}

//play-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M8 3.045v25.91l19-12.952zm1 1.893l16.225 11.064L9 27.062z"/><path fill="none" d="M0 0h32v32H0z"/></svg>

//square-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M5.8 29h21.4a1.8 1.8 0 0 0 1.8-1.8V5.798A1.802 1.802 0 0 0 27.198 4h-21.4A1.8 1.8 0 0 0 4 5.798V27.2A1.8 1.8 0 0 0 5.8 29zM5 5.798A.798.798 0 0 1 5.798 5h21.4a.801.801 0 0 1 .802.798V27.2a.801.801 0 0 1-.8.8H5.8a.8.8 0 0 1-.8-.8z"/><path fill="none" d="M0 0h32v32H0z"/></svg>

//chevron-left-32.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M18.793 25l-9-9 9-9h1.414l-9 9 9 9z"/><path fill="none" d="M0 0h32v32H0z"/></svg>

You can Try it Online!