Qt QML中MouseArea的网格

时间:2011-09-22 09:52:57

标签: c++ qt

我在QT QML中创建了一个包含MouseArea元素的Item。

这是代码,

import QtQuick 1.0
Rectangle {
id: base
width: 240
height: 320
x:0; y:0
color: "#323138"
/////////////////////// MAIN FOCUSSCOPE //////////////////////
FocusScope {
    id: mainfocus
    height: base.height; width: base.width
    focus: true
    /////////////////////// MAIN GRID ///////////////////////////
    GridView {
        id: maingrid
        width: base.width-10; height: base.height-titlebar.height-10
        x: 5; y: titlebar.height+5;
        cellHeight: maingrid.height/3; cellWidth: maingrid.width/3-1
        Component {
            id: myicon
            Rectangle {
                id: wrapper
                height: maingrid.cellHeight-10; width: maingrid.cellWidth-10
                radius: 8; smooth: true
                color: GridView.isCurrentItem ? "#c0d0c0" : "transparent"
                focus: true
                MouseArea {
                    id: clickable
                    anchors.fill: wrapper
                    hoverEnabled: true
                    //onClicked: func()
                }
                Image {
                    id: iconpic
                    source: "./ui6.svg"
                    anchors.centerIn: wrapper
                }
                Text {
                    id: iconname
                    color: wrapper.GridView.isCurrentItem ? "black" : "#c8dbc8"
                    anchors.top: iconpic.bottom; anchors.horizontalCenter: iconpic.horizontalCenter
                    text:  name
                }
            }
        }
        model: 4
        delegate: myicon
        focus:  true
    }
}
//////////////////////// TITLEBAR ///////////////////////
Rectangle {
    id: titlebar
    x:base.x
    y:base.y
    height: 25; width: base.width
    color : "#356f47"
    Text {
        color: "#fdfdfd"
        anchors.centerIn: titlebar
        text: "title"
    }
}
}

我想制作一个这样的项目的网格,这样它就会给我一个我创建的自定义可点击项目的网格,我可以将它用于不同的功能。

使用GridView元素,我能够制作一个使用自定义项目数量作为模板的网格。

问题是,当我点击这些项目中的任何一个时,它会执行一个函数,因为我的Item中只有一个MouseArea元素。我能够检测到项目上的单击,但无法唯一地确定单击了哪个项目。我如何实现这一目标?

当然,我可能做错了,所以也欢迎其他建议。 感谢

1 个答案:

答案 0 :(得分:2)

当GridView项创建实例时,它们继承索引变量。这标识了唯一的项目。

MouseArea {
    id: clickable
    anchors.fill: wrapper
    hoverEnabled: true
    onClicked: {
        maingrid.currentIndex=index;

        switch (index)
        {
        case 0:
            //Function or method to call when clicked on first item
            break;
        case 1:
            //Function or method to call when clicked on second item
            break;
        default:
            //Function or method to call when clicked on another item
            break;
        }
    }
}

我希望它可以帮到你!