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

來源

2017-07-24 Lukasz Re

標題是可怕的，也是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它的行爲就像對象引用。

來源

2017-07-24 19:49:54 dtech

Rectangle.color的行爲像一個對象而不是像一個字符串

回答

相關問題