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

Question

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
}
}
}

Answer 1

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'
}