QML GridView выделение элемента мышкой

Question

Имеется GridView, нужно при наведении мышкой на элемент сетки делать его активным. Не могу понять что дописать в onEntered.

Код:

   Component {
        id: contactDelegate
        Item {
            width: gridView.cellWidth; height: gridView.cellHeight
            MouseArea
            {
                width: parent.width
                height: parent.height
                hoverEnabled: true
                Column {
                    anchors.fill: parent
                    Image {
                        width: 100
                        height: 100
                        source:path
                        fillMode: Image.PreserveAspectFit
                        anchors.horizontalCenter: parent.horizontalCenter }
                    Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
                }
            }
        }
    }
    GridView {
        id: gridView
        x: 0
        y: 80
        width: 640
        height: 400
        highlightRangeMode: GridView.ApplyRange
        flickableDirection: Flickable.AutoFlickDirection
        boundsBehavior: Flickable.DragOverBounds
        cellHeight: 120
        cellWidth: 110
        highlightFollowsCurrentItem: true
        keyNavigationEnabled: true
        focus:true
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        delegate:contactDelegate
        model:
            ListModel {
            id:files

        }
    }

На данный момент выделение по умолчанию на 1ом элементе и не смещается

Answer 1

Попробуй вот так:

Component {
        id: contactDelegate
        Item {
            width: gridView.cellWidth; height: gridView.cellHeight
            MouseArea {
                width: parent.width
                height: parent.height
                hoverEnabled: true
                onClicked: {
                    gridView.currentIndex = index
                }
                Column {
                    anchors.fill: parent
                    Image {
                        width: 100; height: 100
                        source: path
                        fillMode: Image.PreserveAspectFit
                        anchors.horizontalCenter: parent.horizontalCenter
                    }
                    Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
                }
            }
        }
    }

    GridView {
        id: gridView
        x: 0; y: 80
        width: 640; height: 400
        cellHeight: 120; cellWidth: 110
        highlightRangeMode: GridView.ApplyRange
        flickableDirection: Flickable.AutoFlickDirection
        boundsBehavior: Flickable.DragOverBounds        
        keyNavigationEnabled: true
        focus: true
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        delegate: contactDelegate
        model: ListModel { id:files }
    }
}

Так же если делегат имеет свойство "color" можно попробовать следующее

color: GridView.isCurrentItem ? "lightsteelblue" : "transparent"

Но в этом случае highlight не нужно использовать так как получится двойная индикация.

БЛОГ НА HUSL

QML GridView выделение элемента мышкой

Ответы (1 шт):