QML如何实现点击及键盘方向键操作时GridView图片的选中态切换

实现方案 #

你需要的功能可以通过Qt Quick GridView自带的附加属性GridView.isCurrentItem配合事件绑定实现，完整修改后的代码如下：

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 1920
    height: 1080
    visible: true
    title: qsTr("Hello World")
    Component.onCompleted: {
        mojgrid.focus = true
        request() // 页面加载完成后调用接口请求数据
    }

    function dobioResponseNapraviModel(response) {
        console.log("dobioResponseNapraviModel", typeof response)
        mojgrid.model=response
    }

    function request(){
        console.log("BOK")
        const xhr=new XMLHttpRequest()
        const method="GET";
        const url="http://api.themoviedb.org/4/list/1";
        xhr.open(method, url, true);
        xhr.setRequestHeader( "Authorization", 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5YjBkOGVlMGQzODdiNjdhYTY0ZjAzZDllODM5MmViMyIsInN1YiI6IjU2MjlmNDBlYzNhMzY4MWI1ZTAwMTkxMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.UxgW0dUhS62m41KjqEf35RWfpw4ghCbnSmSq4bsB32o');
        xhr.onreadystatechange=function(){
            if(xhr.readyState===XMLHttpRequest.DONE){
                var status=xhr.status;
                if(status===0 || (status>=200 && status<400)){
                    dobioResponseNapraviModel(JSON.parse(xhr.responseText).results)
               }else{
                    console.log("There has been an error with the request", status, JSON.stringify(xhr.responseText))
                }
            }
        }
        xhr.send();
    }

    GridView {
        id:mojgrid
        anchors.fill: parent
        cellWidth: 350 // 和delegate宽度对齐，避免显示错位
        cellHeight: 420 // 预留文字显示高度
        model: [] // 初始为空数组，数据请求返回后自动更新
        currentIndex: 0 // 默认选中第一项

        delegate: Rectangle{ 
            id: rect; 
            width:350;
            height: 400; 
            color:'gray'
            Image{
                id:image; 
                width:parent.width; 
                height:parent.height
                // 核心绑定：当前项为选中状态时显示海报，否则显示背景图
                source: GridView.isCurrentItem ? "http://image.tmdb.org/t/p/w400"+modelData.poster_path : "http://image.tmdb.org/t/p/w400" + modelData.backdrop_path
            }
            Text{ 
                text:modelData.title ;
                font.pointSize: 11
                anchors.bottom: parent.bottom
            }
            MouseArea{
                anchors.fill:parent
                // 点击时选中当前项
                onClicked: mojgrid.currentIndex = index
                // 鼠标移入时选中当前项
                onEntered: mojgrid.currentIndex = index
                // 鼠标移出时取消选中，切回背景图
                onExited: mojgrid.currentIndex = -1
            }
        }
    }
}

关键改动说明 #

• 修正了原有代码中model: request()的错误写法，改为组件初始化完成后调用请求，初始model赋值为空数组
• 利用GridView自带的GridView.isCurrentItem附加属性绑定图片路径，无需手动修改source属性，自动响应选中状态变化
• GridView默认支持上下左右方向键切换currentIndex，只要保持GridView处于focus状态即可自动触发图片切换
• 补充了MouseArea的移入移出事件，实现鼠标离开自动切回背景图的效果

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