CODEWITHSUNDEEP
qtqml
user15502553
user15502553

Reputation:

How to change property of QML file from a QML file?

I created a switch in my settingsPage.qml file that can be turned on and off. When this is done, I want to change the color of a rectangle from homePage.qml file. How do I create a connection between two qml files?

homePage.qml

import QtQuick 2.0
import QtQuick.Controls 2.15
import "../controls"
import QtQuick.Layouts 1.0

Item {
id: item1
Rectangle {
    id: rectangle
    color: "#2c313c"
    anchors.fill: parent
    property color windowBackground: #495163
    ...

I want to change the property windowBackground with the switch from settings.qml

            Rectangle {
                id: lightmode
                width: 220
                height: 60
                visible: true
                color: "#2c303b"
                radius: 10
                border.width: 0
                Layout.fillHeight: false
                anchors.topMargin: 20
                anchors.leftMargin: 20
                Switch {
                    id: customTitleBar1
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    display: AbstractButton.IconOnly
                    onToggled: {
                        //backend.showHideRectangle(customTitleBar.checked)
                    }
                    font.wordSpacing: 0
                    padding: 0
                    font.pointSize: 15
                    rightPadding: 0
                    Label {
                        id: labelTextName2
                        x: 120
                        width: 200
                        color: "#e8e9ec"
                        text: qsTr("Light Mode")
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        anchors.rightMargin: -170
                        font.pointSize: 14
                    }
                    spacing: 20
                }
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            }

(I am using Py Creator, Pyside2, and Qt Quick Control widgets.)

EDIT: Add complete code:

Code

settingsPage.qml:

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11
Item {
id: item1
Rectangle {
    id: rectangle
    color: "#2c313c"
    anchors.fill: parent

    Rectangle {
        id: rectangleTop
        height: 69
        color: "#20232b"
        radius: 10
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 50
        anchors.leftMargin: 50
        anchors.topMargin: 40

        Label {
            id: labelTextName
            x: 10
            color: "#f1f2f3"
            text: qsTr("Settings")
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            anchors.topMargin: 22
            anchors.bottomMargin: 22
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            font.pointSize: 14
        }
    }

    Rectangle {
        id: rectangleTop1
        color: "#20232b"
        radius: 10
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.topMargin: 131
        anchors.leftMargin: 50
        anchors.rightMargin: 50

        GridLayout {
            id: gridLayout
            anchors.fill: parent
            rows: 2
            columns: 2
            anchors.rightMargin: 10
            anchors.leftMargin: 10
            anchors.bottomMargin: 10
            anchors.topMargin: 10

            Rectangle {
                id: rectangle1
                width: 220
                height: 60
                visible: true
                color: "#2c303b"
                radius: 10
                border.width: 0
                Layout.fillHeight: false
                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                Layout.fillWidth: true
                anchors.leftMargin: 20
                anchors.topMargin: 20

                Switch {
                    id: lightmode
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    display: AbstractButton.IconOnly
                    spacing: 20
                    font.wordSpacing: 0
                    rightPadding: 0
                    padding: 0
                    font.pointSize: 15
                    onToggled: {
                        

                    }

                    Label {
                        id: labelTextName1
                        x: 120
                        width: 200
                        color: "#e8e9ec"
                        text: qsTr("Light Mode")
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        anchors.rightMargin: -170
                        font.pointSize: 14

                    }
                }
            }

            Rectangle {
                id: other
                width: 220
                height: 60
                visible: false
                color: "#2c303b"
                radius: 10
                border.width: 0
                Layout.fillHeight: false
                anchors.topMargin: 20
                anchors.leftMargin: 20
                Switch {
                    id: customTitleBar1
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    display: AbstractButton.IconOnly
                    onToggled: {
                        //backend.showHideRectangle(customTitleBar.checked)
                    }
                    font.wordSpacing: 0
                    padding: 0
                    font.pointSize: 15
                    rightPadding: 0
                    Label {
                        id: labelTextName2
                        x: 120
                        width: 200
                        color: "#e8e9ec"
                        text: qsTr("other")
                        anchors.right: parent.right
                        anchors.top: parent.top
                        anchors.bottom: parent.bottom
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        anchors.rightMargin: -170
                        font.pointSize: 14
                    }
                    spacing: 20
                }
                Layout.fillWidth: true
                Layout.alignment: Qt.AlignLeft | Qt.AlignTop
            }
        }
    }



}

}

The homePage.qml:

import QtQuick 2.0
import QtQuick.Controls 2.15
import "../controls"
import QtQuick.Layouts 1.0

Item {
id: item1
Rectangle {
    id: rectangle
    color: "#2c313c"
    anchors.fill: parent
    //property color backgroundColor: globalObject.switchValue ? "#ffffff" : "#000000"

    Rectangle {
        id: rectangleTop
        height: 69
        color: "#495163"
        //color: backgroundColor
        radius: 10
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.rightMargin: 50
        anchors.leftMargin: 50
        anchors.topMargin: 40

        Label {
            id: labelTextName
            x: 10
            color: "#e1e2e6"
            text: qsTr("Welcome")
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            anchors.topMargin: 22
            anchors.bottomMargin: 22
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            font.pointSize: 14
        }
    }

    Rectangle {
        id: rectangleVisible
        width: 540
        color: "#1d2128"
        radius: 10
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: rectangleTop.bottom
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 40
        anchors.rightMargin: 50
        anchors.leftMargin: 50
        anchors.topMargin: 10

        GridLayout {
            anchors.fill: parent
            columnSpacing: 5
            anchors.bottomMargin: 61
            anchors.topMargin: 119
            anchors.rightMargin: 10
            anchors.leftMargin: 10
            rows: 2
            columns: 3


            CustomButton{
                id: btnChangeName
                height: 70
                text: "Bitcoin"
                font.pointSize: 12
                colorPressed: "#232435"
                colorMouseOver: "#2b2c42"
                colorDefault: "#252639"
                Layout.leftMargin: 10
                Layout.maximumWidth: 200
                Layout.fillWidth: true
                Layout.preferredHeight: 70
                Layout.preferredWidth: 250
                onClicked: {
                    backend.setBtc()
                    backend.setAsOfLabel()
                }
            }

            CustomButton {
                id: btnChangeName1
                height: 70
                text: "Ethereum"
                font.pointSize: 12
                colorPressed: "#232435"
                colorMouseOver: "#2b2c42"
                colorDefault: "#252639"
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                Layout.preferredWidth: 250
                Layout.preferredHeight: 70
                Layout.maximumWidth: 200
                Layout.fillWidth: true
                onClicked: {
                    backend.setEth()
                    backend.setAsOfLabel()
                }
            }

            CustomButton {
                id: btnChangeName2
                height: 70
                text: "Binance Coin"
                font.pointSize: 12
                colorPressed: "#232435"
                colorMouseOver: "#2b2c42"
                colorDefault: "#252639"
                Layout.rightMargin: 10
                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                Layout.preferredWidth: 250
                Layout.preferredHeight: 70
                Layout.maximumWidth: 200
                Layout.fillWidth: true
                onClicked: {
                    backend.setBnb()
                    backend.setAsOfLabel()
                }
            }

            CustomButton {
                id: btnChangeName3
                height: 70
                text: "XRP"
                font.pointSize: 12
                colorPressed: "#232435"
                colorMouseOver: "#2b2c42"
                colorDefault: "#252639"
                Layout.leftMargin: 10
                Layout.preferredWidth: 250
                Layout.preferredHeight: 70
                Layout.maximumWidth: 200
                Layout.fillWidth: true
                onClicked: {
                    backend.setXrp()
                    backend.setAsOfLabel()
                }
            }

            CustomButton {
                id: btnChangeName4
                height: 70
                text: "sBDO"
                font.pointSize: 12
                colorPressed: "#232435"
                colorMouseOver: "#2b2c42"
                colorDefault: "#252639"
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                Layout.preferredWidth: 250
                Layout.preferredHeight: 70
                Layout.maximumWidth: 200
                Layout.fillWidth: true
                onClicked: {
                    backend.setsBdo()
                    backend.setAsOfLabel()
                }
            }

            CustomButton {
                id: btnChangeName5
                height: 70
                text: "BDO"
                font.pointSize: 12
                colorPressed: "#232435"
                colorMouseOver: "#2b2c42"
                colorDefault: "#252639"
                Layout.rightMargin: 10
                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
                Layout.preferredWidth: 250
                Layout.preferredHeight: 70
                Layout.maximumWidth: 200
                Layout.fillWidth: true
                onClicked: {
                    backend.setBdo()
                    backend.setAsOfLabel()
                }
            }
        }

        Label {
            id: labelDate
            y: 295
            height: 25
            color: "#55aaff"
            text: qsTr(" ")
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            anchors.bottomMargin: 5
            anchors.rightMargin: 10
            anchors.leftMargin: 10
            font.pointSize: 12
        }

        Label {
            id: priceSet
            height: 70
            color: "#cbcbde"
            text: qsTr("Please select the following:")
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            wrapMode: Text.Wrap
            font.pointSize: 25
            anchors.rightMargin: 50
            anchors.leftMargin: 50
            anchors.topMargin: 5
            Component.onCompleted:{


            }
        }

        Label {
            id: asOfLabel
            height: 70
            color: "#cbcbde"
            text: qsTr(" ")
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            wrapMode: Text.Wrap
            anchors.rightMargin: 30
            font.pointSize: 16
            anchors.topMargin: 48
            anchors.leftMargin: 30
        }




    }
}

Connections{
    target: backend

    function onPrintTime(time){
        labelDate.text = time
    }


    function onBdoInfo(argument){
        priceSet.text = argument
    }

    function onDiffsbdoInfo(argument){
        priceSet.text = argument

    }
    function onAsOfLabel(argument){
        asOfLabel.text = argument

    }
    function onAssetBTC(argument){
        priceSet.text = argument
    }
    function onAssetBNB(argument){
        priceSet.text = argument
    }
    function onAssetXRP(argument){
        priceSet.text = argument
    }
    function onAssetsBDO(argument){
        priceSet.text = argument
    }
    function onAssetBDO(argument){
        priceSet.text = argument
    }
    function onAssetETH(argument){
        priceSet.text = argument
    }


}

}

Upvotes: 0

Views: 734

Answers (1)

JarMan
JarMan

Reputation: 8277

Since you haven't provided a complete code example, it's impossible to give an exact answer here. If your homePage instance is a parent of the settings.qml, then you could just reference it by id. That means if your code is something like this:

// HomePage.qml
Item {
    id: homepage

    Settings {}
}

then your Settings object can see the properties of HomePage, and you can do this:

// Settings.qml
Rectangle {
    Switch {
        onToggled: {
            homePage.doSomething()
        }
    }
}

Or you can do it the reverse way and expose a property in Settings that HomePage can access:

// Settings.qml
Rectangle {
    property alias switchToggled: switch.toggled
    Switch {
        id: switch
    }
}
// HomePage.qml
Item {
    id: homepage

    property color backgroundColor: settings.switchToggled ? 'red' : 'blue'

    Settings { id: settings}
}

Or for a third option, you can have both HomePage and Settings access data from some external source, like a C++ or Python object, or some QML singleton. That would look something like this:

// Settings.qml
Rectangle {
    Switch {
        onToggled: {
            globalObject.switchValue = toggled
        }
    }
}
// HomePage.qml
Item {
    id: homepage

    property color backgroundColor: globalObject.switchValue ? 'red' : 'blue'
}

Upvotes: 1

Related Questions