如何从 QML 文件更改 QML 文件的属性？答案

【问题标题】：How to change property of QML file from a QML file?如何从 QML 文件更改 QML 文件的属性？
【发布时间】：2021-06-25 19:05:39
【问题描述】：

我在我的 settingsPage.qml 文件中创建了一个可以打开和关闭的开关。完成后，我想从 homePage.qml 文件中更改矩形的颜色。如何在两个 qml 文件之间建立连接？

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

我想用settings.qml中的开关改变属性windowBackground

            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
            }

（我正在使用 Py Creator、Pyside2 和 Qt Quick Control 小部件。）

编辑：添加完整代码：

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



}

}

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
    }


}

}

【问题讨论】：

标签： qt qml

【解决方案1】：

由于您没有提供完整的代码示例，因此无法在此给出准确的答案。如果您的 homePage 实例是 settings.qml 的父级，那么您可以通过 id 引用它。这意味着如果您的代码是这样的：

// HomePage.qml
Item {
    id: homepage

    Settings {}
}

那么你的 Settings 对象可以看到 HomePage 的属性，你可以这样做：

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

或者你可以反过来做，在设置中公开一个主页可以访问的属性：

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

或者对于第三种选择，您可以让 HomePage 和 Settings 从某个外部源（例如 C++ 或 Python 对象或某些 QML 单例）访问数据。看起来像这样：

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

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

【讨论】：

我编辑了帖子以添加完整的代码。此外，当我尝试您的解决方案时，它说：ReferenceError: globalObject is not defined and the same for homePage
嗯，是的。没有名为globalObject 的内置对象。那是一个例子。您必须在 .cpp 代码中定义它并将其公开给 QML，或使用 QML 单例等。您将很容易找到大量关于如何公开 .cpp 对象或制作 QML 单例的示例。跨度>
看起来您已经在使用名为 backend 的东西了。因此，将globalObject 替换为backend，并向backend 添加一个包含Switch 值的属性。
所以在 main.py 文件中，我创建了一个名为 switchMode() 的函数，我将在 {} 中放入什么？编辑：是否可以同时使用后端和单例？
我不知道你想让switchMode 函数做什么。它只是要检索Switch 的当前状态吗？然后返回一个布尔值。是的，您可以同时拥有任意数量的后端对象和单例。