QML嵌套GridView中如何传递item位置至StackView避免值为undefined

当前代码中enterDirectory函数里的itematindexPos始终为undefined，原因是该变量仅在GridView内部的MouseArea点击事件中定义，作用域仅限于该回调函数，外部无法访问。要解决这个问题，需要将点击的item位置存储到全局可访问的属性中，让StackView的过渡动画能获取到正确值。

解决步骤 #

• 在根对象allApps上定义全局属性currentItemPos，用于存储点击的GridView item坐标
• 在GridView的点击事件中，将计算好的itematindexPos赋值给allApps.currentItemPos
• 在enterDirectory函数中先判断currentItemPos是否有效，避免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
    // 新增全局属性存储点击的item位置
    property point currentItemPos: Qt.point(0, 0)

    function enterDirectory(){
            let centerOfCell = Qt.point((Screen.width/8) * .45/2, (Screen.width/8) * .45/2)
            // 先判断currentItemPos是否有效，无效则用默认坐标
            let targetPos = currentItemPos.x !== undefined ? currentItemPos : Qt.point(Screen.width/2, Screen.height/2)
            let posOfItemInGridView = Qt.point(targetPos.x - centerOfCell.x, targetPos.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)
                                        // 将坐标赋值给全局属性
                                        allApps.currentItemPos = itematindexPos
                                        }
                                    }
                            model: visualModel
                                MyDelegateModel{
                                    id:visualModel
                                    delegate: MyDelegate {
                                        id: delegateRoot
                      }
                    }
                  }
                }
              }

            AppsModel{
                id:appsModel
             }
           }

    }
}

内容的提问来源于stack exchange，提问作者cgiannakidis