How to change focus in GridView on key navigation QML - image

Question

I'm trying to change focus of an image while pressing keys (left, right, up and down) in GridView. When I press left, right, up or down key, I should change image focus and change the image when focus on that image is true. Otherwise, if focus is not on the image, old image should be seen.
Here is what I have by now:
And here is my code:
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'
}
}
}
}
}
I have Keys.onPressed here with an if condition, but it doesn't work. Can someone help me?

Answer 1

I simplified and reformat your code little bit but this code snippet is doing what do you want to do. When key navigation is enabled GridView is handling index update by itself. Actually key navigation is working and when you press keys current index is updated. GridView also handles limits on navigation, when you press down in the last row nothing happens as same as when you press left on the first column. The trick is using currentindex to update image.
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()
}
}