CODEWITHSUNDEEP
qtlistviewmodelqmlqtquick2
Pillar
Pillar

Reputation: 107

ListView model function

I am just getting started in Qt, and trying to make function which operates ListView model's elements.

I have custom made button in "myButton.qml" which has states like "normal", "pressed", "selected", etc.

ListView is in "main.qml". Structure is like this:

ListView{
    //...

    model: nameModel

    delegate: myButton {
        //...
    }

}

So here is my goal: this list of buttons should act like group of radiobuttons - only one can have selected state and selected state is when you press button. I think that I should have click handler and a function that calls on button click. Function should check the list of buttons and if one button was selected before function just changes its state to "Normal".

So I have no idea of how to write this func and where should I place it. I read Qt docs but still no idea.

Upvotes: 0

Views: 474

Answers (1)

BaCaRoZzo
BaCaRoZzo

Reputation: 7692

A possible easy way to solve this problem is by exploiting ExclusiveGroup. As discussed in the documentation, support to this type can be added to any type:

It is possible to add support for ExclusiveGroup for an object or control. It should have a checked property, and either a checkedChanged, toggled(), or toggled(bool) signal. It also needs to be bound with ExclusiveGroup::bindCheckable() when its ExclusiveGroup typed property is set.

You can define an ExclusiveGroup at the ListView level and implement the required logic in the ListView delegate. By binding the delegate ExclusiveGroup property to the ExclusiveGroup of the ListView you should achieve what you want, without the need of a function that crawls the model.

Final toy example to demonstrate the usage:

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4


Window {
    id: root
    visible: true
    width: 200
    height: 500

    ListView {
        anchors.fill: parent
        model: 10
        spacing: 20
        ExclusiveGroup { id: ex }   // the group for all the delegate

        delegate: Rectangle {
            id: delegate
            width: ListView.view.width
            height: 30
            color: checked ? "yellow" : "steelblue"

            // code to have exclusive behaviour
            property bool checked: false
            property ExclusiveGroup exclusiveGroup: ex

            onExclusiveGroupChanged: {
                if (exclusiveGroup)
                    exclusiveGroup.bindCheckable(delegate)
            }

            // mouse area to trigger the property change
            MouseArea {
                anchors.fill: parent
                onClicked: checked = true
            }
        }
    }
}

Upvotes: 1

Related Questions