Question

当用户单击带有以下QML代码的按钮时，我正在尝试交换两个颜色属性的值：

Item {
    property color primaryColor: "black"
    property color secondaryColor: "white"

    MouseArea {
        onClicked: {
            var tmp = primaryColor
            primaryColor = secondaryColor
            secondaryColor = tmp
        }
    }
}

但不交换它们，而是将两个值都设置为#ffffff。添加调试输出显示以下图片：

Code:
        onClicked: {
            var tmp = primaryColor
            console.log(primaryColor, secondaryColor, tmp)
            primaryColor = secondaryColor
            console.log(primaryColor, secondaryColor, tmp)
            secondaryColor = tmp
            console.log(primaryColor, secondaryColor, tmp)
        }

Output:
qml: #000000 #ffffff #000000
qml: #ffffff #ffffff #ffffff
qml: #ffffff #ffffff #ffffff

很可能，它认为tmp是primaryColor属性的别名，而不仅仅是具有当前值primaryColor的变量。

将var tmp = primaryColor更改为var tmp = primaryColor + ""可以解决此问题，但看起来很丑。每种类型的丑陋都不一样。 有没有更干净的方法来实现相同的行为？

Answer 1

有两种方法可以做到这一点。注释中提到的第一个方法是使用propertyname.toString()将属性转换为字符串：

MouseArea {
    anchors.fill: parent

    onClicked: {
        var tmp = primaryColor.toString()
        console.log(primaryColor, secondaryColor, tmp)
        primaryColor = secondaryColor.toString()
        console.log(primaryColor, secondaryColor, tmp)
        secondaryColor = tmp //no need for toString() here, it is already a string
        console.log(primaryColor, secondaryColor, tmp)
    }
}

第二种方法是在property color tmp内创建一个MouseArea并使用它交换值，而无需将属性转换为字符串：

MouseArea {
    anchors.fill: parent
    property color tmp

    onClicked: {
        tmp = primaryColor
        console.log(primaryColor, secondaryColor, tmp)
        primaryColor = secondaryColor
        console.log(primaryColor, secondaryColor, tmp)
        secondaryColor = tmp
        console.log(primaryColor, secondaryColor, tmp)
    }
}

在两种情况下，结果都是：

qml: #000000 #ffffff #000000
qml: #ffffff #ffffff #000000
qml: #ffffff #000000 #000000

交换两个QML属性的值

1 个答案: