How to set focus for the items on mouse movement - List View

[JasmineSethi]

How to set focus/highlight for the items(red,blue green) on selection?

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle {
width: 800
height: 480

Rectangle {
    id:comboBox
    property variant items: ["Red", "Blue", "Green"]

    signal comboClicked;
    anchors.centerIn: parent
    width: 141
    height: 30;
    z: 0
    smooth:true;


    Rectangle
    {
        id:chosenItem
        radius:4;
        width:100;
        height:30;
        color: "#454b4d"
        smooth:true;

        Image
        {
            id: name
            source: "Menu_Button_Dropdown_Enabled_Medium.png"
            anchors.fill: parent
        }

        Text {
            id:chosenItemText
            anchors.centerIn: parent
            color: "black"
            text:"Abc";
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.leftMargin: 12
            font.family: "Arial"
            font.pointSize: 14;
            smooth:true
        }

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                comboBox.state = comboBox.state==="dropDown"?"":"dropDown"
            }
        }
    }

    Rectangle
    {
        id:dropDown
        width:100;
        height:0;
        clip:true;
        border.color: "black"
        anchors.bottom:  chosenItem.top;
        anchors.margins: 2;

        ListView {
            id:listView
            height:1000;
            model: comboBox.items
            currentIndex: 0


            delegate: Item{
                width:comboBox.width;
                height: comboBox.height;




                Text {
                    text: modelData
                    anchors.top: parent.top;
                    anchors.left: parent.left;
                    anchors.margins: 5;
                    color: "black"
                    elide: modelData.elideMode

                }
                MouseArea {
                    anchors.fill: parent;
                    hoverEnabled: true
                    onClicked: {

                        comboBox.state = ""
                        chosenItemText.text = modelData;
                        listView.currentIndex = index;
                    }
                }
            }
        }
    }


    states: State {
        name: "dropDown";
        PropertyChanges { target: dropDown; height:30*comboBox.items.length }
    }

    transitions: Transition {
        NumberAnimation { target: dropDown; properties: "height"; easing.type: Easing.OutExpo; duration: 1000 }
    }
}

}

[dheerendra]

Focus means highlighter ? Did you try to change the currentIndex based on the mouse movement ?

[JasmineSethi]

@dheerendra Yes, to highlight the sub items on clicked. Yes i changed the currentIndex . But still not getting how to add this highlight?

[ODБOï]

@JasmineSethi hi,
simply add this to your ListView s delegate. With this the selected index will have a blue rectangle highlight

Rectangle{id:highlighter; anchors.fill: parent; color: "blue"; visible: listView.currentIndex===index}

Note : in your title you said "on mouse movement" but in the body "on selection"

[Yunus]

Yeah this code can be used but there can be some problems because of delegate

[JasmineSethi]

@LeLev

After adding the above code output is this. By default first index is of blue color and its not changing even if i am using other index values. I dont want this. I want when i will select any index it has to become blue color.

[Yunus]

@JasmineSethi
Did you put lelev's code right after delegate? I tried this and it is working well. When you clicked blue or green, only the clicked one become blue.

[JasmineSethi]

@Yunus

I added like this. Is this fine??

[Yunus]

@JasmineSethi Yes I tried exactly this and it is ok. I don't know that is a problem for you by default the red part is blue firstly. But when you clicked the others then, they become blue and the others blue color disappear.

[JasmineSethi]

@Yunus
Did u make any changes other than "highlighter" rectangle??

[Yunus]

@JasmineSethi said in How to set focus for the items on mouse movement - List View:

ort QtQuick 2.12
import QtQuick.Window 2.12

@JasmineSethi
No I changed nothing I just copied your codes. only difference is that I used

import QtQuick 2.9
import QtQuick.Window 2.2