How in a nested gridview expose a property of a function in qml

Question

In the below example of code there is a GridView id:mainGrid nested in a ListView id:pageList which is the initialItem of the StackView id:stackView.There is a Function which defines the point posOfItemInGridView which is used as x,y point for StackView Transition. How can I get the itematindexPos value from GridView to StackView so the itematindexPos is not undefined.

import QtQml 2.15
import QtQuick.Window 2.2
import QtQml.Models 2.15
import org.kde.plasma.private.kicker 0.1 as Kicker

Kicker.DashboardWindow {
    id: allApps
    function enterDirectory(){
            let centerOfCell = Qt.point((Screen.width/8) * .45/2, (Screen.width/8) * .45/2)
            let posOfItemInGridView = Qt.point(itematindexPos.x - centerOfCell.x, itematindexPos.y - centerOfCell.y)
            return posOfItemInGridView
    }
    mainItem:
      StackView{
        id:stackView
        Transition {
            id: pushEnterTransition
            NumberAnimation {property: "x"; from: -((Screen.width/2)-enterDirectory().x); to: 0; duration: stackView.transitionDuration; easing.type: Easing.OutCubic}
            NumberAnimation {property: "y"; from: -((Screen.height/2)-enterDirectory().y); to: 0; duration: stackView.transitionDuration; easing.type: Easing.OutCubic}
        }
        Transition {
            id: popExitTransition
            NumberAnimation {property: "x"; from:0; to:-((Screen.width/2)-enterDirectory().x); duration: stackView.transitionDuration * 1.5; easing.type: Easing.OutCubic}
            NumberAnimation {property: "y"; from:0; to:-((Screen.height/2)-enterDirectory().y); duration: stackView.transitionDuration * 1.5; easing.type: Easing.OutCubic}
        }
        initialItem:
            MouseArea {
                id: mainItemRoot
                anchors.fill: parent
                hoverEnabled:true
                onClicked: {
                    allApps.toggle();
                }
            ListView{
                id:pageList
                anchors.fill:parent
                model: Math.ceil(appsModel.count / 35)
                delegate:
                    Item {
                        width:   7* mainGrid.cellWidth
                        height:  5* mainGrid.cellHeight
                        GridView {
                            id: mainGrid
                            cellWidth: Screen.width/8
                            cellHeight: Screen.height/6.1
                            anchors.fill: parent
                                MouseArea{
                                    id:areagridView
                                    anchors.fill:parent
                                    onClicked:(mouse)=> {
                                        let posInGridView = Qt.point(mouse.x, mouse.y)
                                        let posInContentItem = mapToItem(mainGrid.contentItem, posInGridView)
                                        let index = mainGrid.indexAt(posInContentItem.x, posInContentItem.y)
                                        let itematindex = mainGrid.itemAtIndex(index)
                                        let itematindexPos = Qt.point(itematindex.x, itematindex.y)
                                        console.log("itematindexPos:", itematindexPos)
                                        }
                                    }
                            model: visualModel
                                MyDelegateModel{
                                    id:visualModel
                                    delegate: MyDelegate {
                                        id: delegateRoot
                      }
                    }
                  }
                }
              }

            AppsModel{
                id:appsModel
             }
           }

    }
}

Thanks in advance.

JarMan · Accepted Answer · 2025-05-23 20:43:04Z

2

itemAtIndexPos is just a local variable inside your onClicked signal handler. It does not exist outside of that handler. If you need to access it elsewhere, you need to create a property outside the handler and assign your value to that property. You probably should give a look at this doc to understand QML scope rules.

Kicker.DashboardWindow {

    // Create a property that exists outside of the functions
    property point itematindexPos

    function enterDirectory(){
            ...

            // The property is accessible inside functions that are in scope
            let posOfItemInGridView = Qt.point(allApps.itematindexPos.x - centerOfCell.x, allApps.itematindexPos.y - centerOfCell.y)
            return posOfItemInGridView
    }

...


    MouseArea{
        anchors.fill:parent
        onClicked:(mouse)=> {
            ...

            // Assign the property some value
            allApps.itematindexPos = Qt.point(itematindex.x, itematindex.y)
        }
    }
}

answered May 23 at 20:43

JarMan

8,3551 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cgiannakidis May 23 at 21:52

The problem is that the mouse area is in Gridview nested in a Listview.I tried your suggestion but the itematindexPos property does not updates its value , is set to (0,0) always.

JarMan May 23 at 22:49

It sounds like you are still assigning to the local variable. Make sure you actually got rid of your local variable. It's not needed at all. Also notice that I am specifying the property as allApps.itematindexPos to make sure it is referencing the QML property when I assign a value to it instead of a javacript variable.

cgiannakidis May 24 at 8:00

ok.What about if the ListView id:pageList with GridView id:mainGrid are in a different qml file.How to reference to the property allApps.itematindexPos?

JarMan May 24 at 13:57

The principle is the same. To access properties in other files, that property still just needs to be stored somewhere that is in scope of the object/file that wants to access it. For instance, a child can see its parent's properties. But it's probably easiest in that case to use a QML singleton.

Collectives™ on Stack Overflow

How in a nested gridview expose a property of a function in qml

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related