CODEWITHSUNDEEP
qtqmlqt-quickqtquick2
silviubogan
silviubogan

Reputation: 3461

Changing a model of a QML ListView doesn't change the corresponding delegate

Below I create a ListView with a delegate which contains a CheckBox whose checked property is bound to the model's checked role. When the delegate is clicked, I want to toggle the CheckBox state by changing the model's checked property. But the binding between checkBox.checked and model.checked works only the first time the user clicks on the delegate. After that, checkBox is always checked, independent of the model.checked value. The result is that the user cannot uncheck the checkbox and I do not want this.

import QtQuick 2.2
import QtQuick.Controls 1.1

ListView { id: listView
    height: 100
    width: 100

    model: ListModel {
        ListElement { checked: false }
        ListElement { checked: false }
    }

    delegate: Rectangle {
        width: listView.width
        implicitHeight: checkBox.implicitHeight * 1.3

        CheckBox { id: checkBox
            anchors.fill: parent
            text: index + 1
            checked: model.checked
        }

        MouseArea { id: mouseArea
            anchors.fill: parent
            onClicked: {
                var item = listView.model.get(index);

                console.log('old model.checked:', model.checked);
                item.checked = !item.checked;
                console.log('new model.checked:', model.checked);

                console.log('checkBox.checked:', checkBox.checked);
                console.log('something went wrong:', model.checked !== checkBox.checked);
            }
        }
    }
}

Where is the problem in my code and how can I make the delegate work like a normal CheckBox?

Upvotes: 4

Views: 6682

Answers (1)

silviubogan
silviubogan

Reputation: 3461

This is a reported bug: https://bugreports.qt.io/browse/QTBUG-31627.

Using the walkaround described in the comments under that bug report makes the checkbox from my code work normally. I removed the checked: model.checked line and added the following code to the Rectangle delegate:

Binding {
    target: checkBox
    property: 'checked'
    value: model.checked
}

Upvotes: 6

Related Questions