Marc Van Daele
Marc Van Daele

Reputation: 2734

Component pushed on StackView does not bind correctly

The example below illustrates my problem. I create a small Rectangle at the top left and clicking on it toggles the color between red and green.

Next, I create a StackView and I push a Rectangle to the StackView and bind the color of this second Rectangle to the color of the top-left rectangle

Expected behavior would be that, clicking on the top-left Rectangle would also change the color of the Rectangle on the StackView since the color was binded. Unfortunately, this is not the case.

Note that things work fine when pushing stackRect2 to the stack (see line in comment)

import QtQuick 2.0
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id: mainWindow
    visible: true
    width: 1280
    height: 720

    Rectangle {
        id: rect
        width: 100
        height: 100
        focus: true

        color: toggle? "red":"green"
        property var toggle:false;
        MouseArea {
            anchors.fill: parent
            onClicked: rect.toggle = !rect.toggle
        }
    }

    StackView {
        id: stack
        width: 100
        height:100
        anchors.left: rect.right
        anchors.leftMargin: 10

        Component.onCompleted: {
            stack.push ({item:stackRect, properties: {color:rect.color}})
            //stack.push ({item:stackRect2})
        }
    }

    Component {
        id:stackRect
        Rectangle {}
    }
    Component {
        id:stackRect2
        Rectangle {color:rect.color}
    }
}

Upvotes: 0

Views: 585

Answers (1)

Marc Van Daele
Marc Van Daele

Reputation: 2734

Apparently, this behavior is expected behavior and is in line with Component::createObject(). Using

    stack.push (stackRect,  {color:Qt.binding(function() { return rect.color})})

works just fine.

Upvotes: 0

Related Questions