GridView使用MouseArea

QML > GridView GridView MouseArea

发布时间 : 2020-08-28 21:00

字数:175 阅读 :

评论:

需求:
效果预览：
代码:
结束

需求:

GridView使用MouseArea进行text触发

效果预览：

GridView使用MouseArea.png

代码:

import QtQuick 2.0

Item {
    height: 600
    width:950

    property int currentPressSourceIndex: 0

    Loader {
      anchors.fill: parent
      sourceComponent: cmSwitchSource
    }
    Component {
        id:cmSwitchSource
        Item{
            Rectangle{
                id: imgSwitch
                anchors.centerIn: parent
                height: 600/2
                width:950/2
                color: "steelblue"
                //防止按键穿透
                MouseArea{
                    anchors.fill: imgSwitch
                    onClicked: {
                        mouse.accepted = false
                    }
                }
                GridView {
                    id: btnSourceList
                    x:60
                    width: parent.width
                    height: parent.height
                    //draggingHorizontally: false
                    //不可拖曳
                    interactive:false
                    clip: true
                    model: ["本地文件","USB1","USB2","AUX音乐","蓝牙音乐"]
                    cellHeight : 230
                    cellWidth : 230
                    delegate: contactsDelegate
                }
            }
        }
    }
    Component {
        id: contactsDelegate
        Item{
            id:delegate
            Text {
                id:txtIcon1
                font.pixelSize: 26
                anchors.horizontalCenter: txtIcon.horizontalCenter
                text:modelData
                color: index===currentPressSourceIndex?"blue":"red"
            }
            Text {
                id:txtIcon
                anchors.top: delegate.top
                anchors.topMargin:30
                font.pixelSize: 26
                text:modelData+"12345"
                color: index===currentPressSourceIndex?"blue":"red"
            }

            MouseArea {
                anchors.fill: txtIcon  //填充谁谁可已点击
                onClicked: {
                    //index
                    console.log("---contactsDelegate----"+index)
                    //切换
                    currentPressSourceIndex=index;
                }
            }

        }
    }

}

结束

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2291184112@qq.com