如何从 QML 文件更改 QML 文件的属性？
[英]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.
我在我的 settingsPage.qml 文件中创建了一个可以打开和关闭的开关。 When this is done, I want to change the color of a rectangle from homePage.qml file.完成后，我想从 homePage.qml 文件更改矩形的颜色。 How do I create a connection between two qml files?如何在两个 qml 文件之间创建连接？
homePage.qml主页.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我想用 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
}
(I am using Py Creator, Pyside2, and Qt Quick Control widgets.) （我正在使用 Py Creator、Pyside2 和 Qt 快速控制小部件。）
EDIT: Add complete code:编辑：添加完整代码：
settingsPage.qml: 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:主页.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
}
}
} }
1 个解决方案
解决方案1
1 2021-03-29 18:46:27
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 .如果您的主页实例是 settings.qml 的父级，那么您可以通过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 object 可以看到 HomePage 的属性，你可以这样做：
// 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. 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'
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
QML 没有从另一个文件中的单例获取属性 - QML not getting property from singleton in another file
从其他qml文件更改元素的属性 - changing property of element from other qml file
如何从 QML 中的 csv 文件中获取“文本”属性？ - How to get "text" property from a csv File in QML?
从 QML 文件中包含另一个 QML 文件 - Include another QML file from a QML file
如何更改另一个QML文件中的标签文本？ - How to change text of label from another qml file?
如何在其他qml文件中的主qml文件中使用qml类型 - How use qml types in main qml file from other qml file
来自文件的QML TableView - QML TableView from file
QML - 如何将变量从一个qml文件发送/传递到其他qml文件 - QML - How to send/pass variable from one qml file to other qml file
如何使用Cascades，Blackberry 10中的Qt / QML / C ++从另一个qml文件更改一个qml文件中的标签文本？ - How do I change the label text in one qml file from another qml file using Qt/QML/C++ in Cascades, Blackberry 10?
如何在QML中显示文件中的位置 - how to display locations from a file in QML
相关标签