如何在关键导航 QML 上更改 GridView 中的焦点

Question

我试图在 GridView 中按下按键（左、右、上、下）时更改图像的焦点。当我按向左、向右、向上或向下键时，我应该改变图像焦点并在该图像上的焦点为真时更改图像。否则，如果焦点不在图像上，则应该看到旧图像。

这是我现在拥有的：

这是我的代码：

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
    }

    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)){
                    //the request has been completed successfully
//                    console.log(xhr.responseText.results)
                    dobioResponseNapraviModel(JSON.parse(xhr.responseText).results)
               }else{
                    console.log("There has been an error with the request", status, JSON.stringify(xhr.responseText))
                }
            }
        }
        xhr.send();
    }





   /* function request(url, callback) {
        var xhr=new XMLHttpRequest();

        xhr.open("GET", url, true)

        xhr.onreadystatechange = function() {
            if(xhr.readyState===4) {


                callback(xhr.responseText)


            }
        }
        xhr.open("GET", url)
        xhr.setRequestHeader( "Authorization", 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI5YjBkOGVlMGQzODdiNjdhYTY0ZjAzZDllODM5MmViMyIsInN1YiI6IjU2MjlmNDBlYzNhMzY4MWI1ZTAwMTkxMyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.UxgW0dUhS62m41KjqEf35RWfpw4ghCbnSmSq4bsB32o');
        xhr.send()

    }*/




    GridView {
        id:mojgrid
        anchors.fill: parent
        cellWidth: 250
        cellHeight: 250
        model:request()
        currentIndex: modelData.id
        keyNavigationEnabled: true
        focus:true


        Keys.onPressed:{
                    if((event.key === Qt.Key_Left) || (event.key===Qt.Key_Right) || (event.key===Qt.Key_Up) || (event.key===Qt.Key_Down)){
                        image.source="http://image.tmdb.org/t/p/w400"+modelData.poster_path
                   }
        }

       /* Keys.onUpPressed: {
           request()
        }*/
      delegate: Rectangle{ id: rect; width: 350; height: 400; color:'gray';
          Image{id:img; width:parent.width; height:parent.height-200
                 //fillMode: Image.PreserveAspectFit
                 //source:"http://image.tmdb.org/t/p/w400" + modelData.backdrop_path
                source:focus?"http://image.tmdb.org/t/p/w400"+modelData.poster_path : "http://image.tmdb.org/t/p/w400" + modelData.backdrop_path

               Rectangle{
                   id:rect2
                   width:parent.width
                   height:text.height
                   anchors.top:img.bottom
                   color:'black'
                 Text{
                       id:text
                       text:modelData.title
                       font.pointSize: 11
                       //anchors.top:image.bottom
                       elide:Text.ElideNone
                       color:'white'
                   }

                }

                MouseArea{
                id:mouse
                anchors.fill:parent

                onClicked: {
                    parent.focus=true
                }
              }



          }

          Rectangle{
              id:rect3
              width:parent.width
              height:200
              anchors.top:rect.bottom
              color:'red'
              z:10

              Text{
                  text:modelData.release_date
                  anchors.left:rect.left
                  anchors.top:rect.bottom
                  color: 'white'

              }
          }





      }
    }
  }

我这里 Keys.onPressed 有一个 if 条件，但它不起作用。有人可以帮助我吗？

Answer 1

我稍微简化并重新格式化了您的代码，但此代码片段正在执行您想要执行的操作。启用键导航后，GridView 正在自行处理索引更新。实际上按键导航正在工作，当您按下按键时，当前索引会更新。 GridView 还处理导航限制，当您在最后一行按下时，与在第一列上向左按下时没有任何反应。诀窍是使用 currentindex 更新图像。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 1920
    height: 1080
    visible: true
    title: qsTr("Hello World")


    function dobioResponseNapraviModel(response) {
        console.log("dobioResponseNapraviModel", typeof response)

        mojgrid.model = response
    }

    GridView {
        id: mojgrid
        anchors.fill: parent
        cellWidth: 250
        cellHeight: 250
        model: request()


        keyNavigationEnabled: true
        focus: true

        delegate: Rectangle {
            id: rect
            width: 350
            height: 400
            color: 'gray'

            property bool isCurrent: mojgrid.currentIndex === index

            Image {
                id: img
                width: parent.width
                height: parent.height - 200

                source: isCurrent ? "http://image.tmdb.org/t/p/w400"
                                + modelData.poster_path : "http://image.tmdb.org/t/p/w400"
                                + modelData.backdrop_path

                Rectangle {
                    id: rect2
                    width: parent.width
                    height: text.height
                    anchors.top: img.bottom
                    color: 'black'
                    Text {
                        id: text
                        text: modelData.title
                        font.pointSize: 11
                        //anchors.top:image.bottom
                        elide: Text.ElideNone
                        color: 'white'
                    }
                }

                MouseArea {
                    id: mouse
                    anchors.fill: parent

                    onClicked: {
                        mojgrid.currentIndex = index
                    }
                }
            }
        }
    }

    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()
    }
}

如何在关键导航 QML 上更改 GridView 中的焦点

How to change focus in GridView on key navigation QML

image

qt

gridview

qml