Rectangle.color的行为像一个对象而不是像一个字符串

问题描述：

我试图做一个功能，将顺时针改变按钮的颜色。当我分配property var acolor: buttons.itemAt(0).color时，变量acolor更改值为buttons.itemAt(0).color更改。为什么会发生？Rectangle.color的行为像一个对象而不是像一个字符串

这是main.qml文件：

import QtQuick 2.6 
import QtQuick.Window 2.2 
import QtQuick.Controls.Styles 1.4 
import QtQuick.Controls 2.2 
import QtQuick.Layouts 1.3 

Window { 
    id: root 
    visible: true 
    width: 600 
    height: 400 
    title: qsTr("My Window") 
    property int numberOfButtons: 9 

    GridLayout{ 
     id: grid 
     columns: 3 
     anchors.fill: parent 

     Repeater { 
      id: buttons 
      model: root.numberOfButtons; 
      delegate: Mybutton {id: butt; color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1); number: index} 
     } 
    } 
}

这是Mybutton.qml：

所有的

Rectangle { 
    id: rectangle 
    width: 50; height: 100 
    color: "red" 
    property int number: 0 

    MouseArea { 
     id: mouse 
     anchors.fill: parent 
     property var acolor: buttons.itemAt(0).color 
     onClicked: { 
      function rotate() 
      { 
       acolor = buttons.itemAt(0).color 
       console.log(acolor)//heare is #11754c 
       buttons.itemAt(0).color = buttons.itemAt(3).color 
       console.log(acolor)// but heare is #6c2c3d 
       buttons.itemAt(3).color = buttons.itemAt(6).color 
       buttons.itemAt(6).color = buttons.itemAt(7).color 
       buttons.itemAt(7).color = buttons.itemAt(8).color 
       buttons.itemAt(8).color = buttons.itemAt(5).color 
       buttons.itemAt(5).color = buttons.itemAt(2).color 
       buttons.itemAt(2).color = buttons.itemAt(1).color 
       buttons.itemAt(1).color = acolor 
      } 
      rotate() 
     } 
    } 
}

标题是可怕的，也是QML属性的上下文意味着绑定，这意味着对于属性更改是有意义的，因为绑定到它的另一个属性发生更改。最后，我在回答中提到的问题是，QML将像对象那样处理颜色属性，而不是我实际上不知道的字符串。鉴于此，我将把标题更改为对将来面对该问题的其他人更有用的格式。 – dtech

答

首先，你的设计是错误的。当它作用于网格布局时，将旋转功能放入按钮在概念上是倒退的。 rotate()函数应该是网格布局的成员，并且您只需调用它onClicked。

二，根据typeof(buttons.itemAt(0).color)的类型color是object。这意味着acolor是对该特定对象的引用，这就解释了为什么该引用指向另一个值，一旦您更改索引0处项目的颜色。

一种方法来欺骗它以隐式地将颜色转换为字符串就是用这样的：

var acolor = "" 
    acolor += buttons.itemAt(0).color 
    console.log(acolor) 
    buttons.itemAt(0).color = buttons.itemAt(3).color 
    console.log(acolor) // the same!!!

而现在它将被保存下来，因为acolor现在是一个字符串，而不是一个对象引用。

此外，你并不需要property var acolor: buttons.itemAt(0).color部分。

你也可以明确的颜色转换为字符串：

var acolor = buttons.itemAt(0).color.toString()

此外，通过移动旋转功能，它属于你大大简化在按钮的鼠标区域：

MouseArea { 
    anchors.fill: parent 
    onClicked: grid.rotate() 
    }

更新：

请注意，如果我们这样做：

property color acolor 

function rotate() { 
    acolor = buttons.itemAt(0).color 
    console.log(acolor) 
    buttons.itemAt(0).color = buttons.itemAt(3).color 
    console.log(acolor) // still the same 
}

它会按照逻辑预期工作。现在acolor的类型为object，但是您有一个对象分配对象，它将值传递给另一个对象，而使用var它的行为就像对象引用。

Rectangle.color的行为像一个对象而不是像一个字符串

相关推荐