function binding property

Galilio

hello together
following I have:

function buttonIsSelected(index)
{
	if(index >= 0){
		listViewId.currentIndex = index
		console.log("listViewId Index --------------------------------------------------",index)
		return true
	}else
		return false
}

ListView
{
	id: listViewId
	anchors.top = parent.top
	.....
	model: 4
	delegate: Button {
		id: tabButtonId
		width: 150
		height: 150
		selected: buttonIsSelected(index)   // Problem is hier
		.....
	}

}

Why does the function buttonIsSelected (index) always return false?
What am I doing wrong?

thanks

J.Hilk

@Galilio no idea, works absolutely fine for me

Window {
    visible: true
    width: 400
    height: 750
    title: qsTr("Hello World")

    function buttonIsSelected(index)
    {
        if(index >= 0){
            listViewId.currentIndex = index
            console.log("listViewId Index --------------------------------------------------",index)
            return true
        }else
            return false
    }

    ListView
    {
        id: listViewId
        anchors.fill: parent
        model: 4
        delegate: Button {
            id: tabButtonId
            width: 150
            height: 150
            property bool selected: buttonIsSelected(index)   // Problem is hier
            onSelectedChanged: console.log("selected changed to", selected)
        }
    }
}

//Output
qml: listViewId Index -------------------------------------------------- 0
qml: selected changed to true
qml: listViewId Index -------------------------------------------------- 1
qml: selected changed to true
qml: listViewId Index -------------------------------------------------- 2
qml: selected changed to true
qml: listViewId Index -------------------------------------------------- 3
qml: selected changed to true

Galilio

What is wrong if I do so in ListView?

property bool selected: listViewId.currentIndex === index

Galilio

@Galilio

The problem with this notation (property bool selected: listViewId.currentIndex === index) is that index and currentIndex do not always have the same value

J.Hilk

@Galilio
I'm not sure I understand your problem, this

ListView
    {
        id: listViewId
        anchors.fill: parent
        model: 4
        delegate: Button {
            id: tabButtonId
            width: 150
            height: 150
            property bool selected:listViewId.currentIndex === index/* buttonIsSelected(index)*/   // Problem is hier
            onSelectedChanged: console.log("selected changed to", selected, "of index:", index)
            text: index
            background: Rectangle{
                color: tabButtonId.selected ? "green" : "red"
            }
            onClicked:{
                listViewId.currentIndex = index
            }
        }
    }

works just fine!

Galilio

Die Farbe der selectiereten Button bleibt aber gleich und das ist nicht das Ziel.
Ziel wäre: sobald ich einen button selktiere muss der andere Button nicht mehr die selktiere frabe haben
sprich:
Button 1 ist selktiert (color "green")
Button 2 ist selktiert (color "green") und Button 1 wird "red" gefährbt
...

J.Hilk

@Galilio
genau
https://vimeo.com/371847377

Galilio

Link leider geht nicht

J.Hilk

@Galilio
fixed the link, should now work