我試圖在GridView中按下鍵（左、右、上、下）時改變影像的焦點。當我按下左、右、上、下鍵時，我應該改變影像的焦點，并在該影像的焦點為真時改變該影像。否則，如果焦點不在影像上，就應該看到舊影像。
以下是我現在的情況。
這是我的代碼：
這是我的代碼。
import QtQuick 2.15
import QtQuick.Window 2.15
視窗 {
寬度：1920
高度。1080
可見。true
標題。qsTr("Hello World"/span>)
Component.onCompleted: {
mojgrid.focus = true dobioResponseNapraviModel
(response) {
console.log("dobioResponseNapraviModel", typeof response)
mojgrid.model=response
}
功能 request(){
console.log("BOK"/span>)
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() {
如果(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 cellHeight: 250
model:request()
currentIndex: modelData.id
keyNavigationEnabled: true
焦點: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"/span> modelData.poster_path
}
}
/* Keys.onUpPressed: {
request()
}*/
委托。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
矩形{
id:rect2
寬度:parent.width
height:text.height
錨.top:img.bottom
color:'black'。
文本{
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=true200。
錨點.頂部:矩形.底部
color:'red'
z:10。
文本{
text:modelData.release_date
anchors.left:rect.left
anchors.top:rect.bottom
color:'white'。
}
}
}
}
}
我在這里有Keys.onPressed，有一個if條件，但它不起作用。誰能幫幫我？
uj5u.com熱心網友回復：
我簡化并重新格式化了你的代碼，但這個代碼片段正在做你想做的事情。當按鍵導航被啟用時，GridView正在自行處理索引更新。實際上，按鍵導航是有效的，當你按下按鍵時，當前的索引會被更新。GridView也處理了導航的限制，當你在最后一行按下時，什么都不會發生，就像你在第一列按下時一樣。技巧是使用currentindex來更新影像。
importQtQuick 2.12
import QtQuick.Window 2.12
視窗 {
寬度：1920
高度。1080
可見。true
標題。qsTr("Hello World"/span>)
function dobioResponseNapraviModel(response){
console.log("dobioResponseNapraviModel", typeof response)
mojgrid.model = response
}
GridView {
id: mojgrid
anchors.fill: parent
cellWidth: 250 250 cellHeight: 250
模型。request()
keyNavigationEnabled。true true
焦點。true true
委托。矩形 {
id: rect
寬度：350
高度。400
顏色: 'gray' 灰色
屬性 bool isCurrent: mojgrid.currentIndex == index
影像 {
id: img
寬度: parent.width
height: parent.height-200
source: isCurrent ? "http://image.tmdb.org/t/p/w400"/span>
modelData.poster_path : "http://image.tmdb.org/t/p/w400"/span>
modelData.backdrop_path
矩形 {
id: rect2
寬度：parent.width
高度：text.height
anchors.top: img.bottom
color: 'black'。
文本 {
id: 文本
text: modelData.title
font.pointSize: 11
//anchors.top:image.bottom。
elide: Text.ElideNone
color: 'white'
}
}
MouseArea {
id: 滑鼠
anchors.fill: parent
onClicked: {
mojgrid.currentIndex = index
}
}
}
}
}
功能 request() {
console.log("BOK"/span>)
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/span>)
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"/span>,
status, JSON.stringify（xhr.responseText）)
}
}
}
xhr.send()
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/326133.html
標籤：
上一篇：使用畫布進行無限的影像移動