navigate image loaded by ListView

liubbc

Hi Qters,

I load some images by ListView and want to navigate these images using keyboard and mouse. The image will be scaled when navigating it . Now it works well using mouse, but there is something wrong using keyboard. The codes are as follows:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1


Window {
    id: window
    visible: true
    width: 1000
    height: 400
    title: qsTr("Settings")
    color: "gray"


    ListModel{
        id: appsModel;
        ListElement{
            name: "Amazon"
            icon: "image/amazon.png"
        }

        ListElement{
            name: "TED"
            icon: "image/TED.png"
        }

        ListElement{
            name: "Netflix"
            icon: "image/netflix.png"
        }
    }

    Component{
        id: imageDelegate;
        Item {
            id: itemID;
            width: 250;
            height: 200;
            y: 100;

            Image {
                id: appsImage;
                source: icon;
                width: 200;
                height: 200;

                fillMode: Image.PreserveAspectFit;
                anchors.horizontalCenter: parent.horizontalCenter;
            }

            Text {
                id: appsName;
                text: name;
                anchors.top: appsImage.bottom;
                anchors.horizontalCenter: parent.horizontalCenter;
            }

            focus: true;
            transformOrigin: Item.Center;

            Keys.onPressed: {
                if(event.key == Qt.Key_Left){
                    console.log("left is pressed");

                    itemID.scale = 1.1;


                }else if(event.key == Qt.Key_Right){
                    console.log("right is pressed");

                    itemID.scale = 1.1;
                }
                //event.accepted = true;

            }

            Keys.onReleased: {
                if(event.key == Qt.Key_Left){
                    console.log("left is pressed");

                    itemID.scale = 1.0;


                }else if(event.key == Qt.Key_Right){
                    console.log("right is pressed");

                    itemID.scale = 1.0;
                }
               // event.accepted = true;
            }

            MouseArea{
                hoverEnabled: true;
                anchors.fill: appsImage;
                onEntered: {
                    console.log("mouse is pressed");
                    itemID.scale = 1.1;
                }
                onExited: {
                    console.log("mouse is exited");
                    itemID.scale = 1.0;
                }
            }
        }
    }

    ListView{
        id: appsListView;
        x: 50;
        width: parent.width - 50;
        height: parent.height;

        focus: true;

        orientation: ListView.Horizontal;

        model: appsModel;
        delegate: imageDelegate;

    }
}

The issue can be reproduced by modifying some lines :
icon: "image/amazon.png"
icon: "image/TED.png"
icon: "image/netflix.png"

Any suggestions about how to process Keys to solve the issue ? Thanks in advance !

By the way, any other solutions to implement the requirement ? I am a novice about Qt .

Thanks.

Marco Pellin

@liubbc

Hi,

I'll give you my solution, but I guess there could be more than one.

What I suggest is thinking that while changing the current element you are moving the focus from one item to the other. So let's think about linking the focus status to the image size, and this is done by using the onFocusChanged signal handler:

            onFocusChanged: {
                if(focus === true){
                    itemID.scale = 1.1;
                }else{
                    itemID.scale = 1.0;
                }
            }

With just this piece of code you are able to navigate with the keyboard.

Now we have to add the mouse functionality. As you did, we add a MouseArea and entering it we have to give focus to the current image, while exiting the area we have to release the focus, like this:

            MouseArea{
                hoverEnabled: true;
                anchors.fill: appsImage;
                onEntered: {
                    console.log("mouse is pressed");
                    itemID.focus = true;
                }
                onExited: {
                    console.log("mouse is exited");
                    itemID.focus = false;
                }
            }

In that way, you may also switch from mouse to keyboard maintaining consistency between the two methods.

Here is the complete code I used:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.1


Window {
    id: window
    visible: true
    width: 1000
    height: 400
    title: qsTr("Settings")
    color: "gray"


    ListModel{
        id: appsModel;
        ListElement{
            name: "Amazon"
            icon: "image/amazon.png"
        }
        ListElement{
            name: "TED"
            icon: "image/TED.png"
        }
        ListElement{
            name: "Netflix"
            icon: "image/netflix.png"
        }
    }

    Component{
        id: imageDelegate;
        Item {
            id: itemID;
            width: 250;
            height: 200;
            y: 100;

            Image {
                id: appsImage;
                source: icon;
                width: 200;
                height: 200;

                fillMode: Image.PreserveAspectFit;
                anchors.horizontalCenter: parent.horizontalCenter;
            }

            Text {
                id: appsName;
                text: name;
                anchors.top: appsImage.bottom;
                anchors.horizontalCenter: parent.horizontalCenter;
            }

            focus: false;
            transformOrigin: Item.Center;

            onFocusChanged: {
                if(focus === true){
                    itemID.scale = 1.1;
                }else{
                    itemID.scale = 1.0;
                }
            }

            MouseArea{
                hoverEnabled: true;
                anchors.fill: appsImage;
                onEntered: {
                    console.log("mouse is pressed");
                    itemID.focus = true;
                }
                onExited: {
                    console.log("mouse is exited");
                    itemID.focus = false;
                }
            }
        }
    }

    ListView{
        id: appsListView;
        x: 50;
        width: parent.width - 50;
        height: parent.height;

        focus: true;

        orientation: ListView.Horizontal;

        model: appsModel;
        delegate: imageDelegate;
    }
}

liubbc

@Marco-Pellin said in navigate image loaded by ListView:

netflix.png

@Marco-Pellin Thanks a lot!
Now It works fine.